import { FolderPlus, Trash2, ChevronRight } from 'lucide-react'
import type { Category } from '../types/category'
import { Tooltip } from './Tooltip'
import styles from './CategoryRow.module.css'

interface BlogCategoryRowProps {
  category: Category
  depth: number
  hasChildren: boolean
  expanded: boolean
  onToggle: () => void
  onAddSub: (id: string) => void
  onRemove: (id: string) => void
}

export function BlogCategoryRow({
  category,
  depth,
  hasChildren,
  expanded,
  onToggle,
  onAddSub,
  onRemove,
}: BlogCategoryRowProps) {
  return (
    <div className={styles.row} style={{ marginLeft: depth * 28 }}>
      <div
        className={`${styles.info} ${hasChildren ? styles.clickable : ''}`}
        onClick={hasChildren ? onToggle : undefined}
        onKeyDown={
          hasChildren
            ? (e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                  e.preventDefault()
                  onToggle()
                }
              }
            : undefined
        }
        role={hasChildren ? 'button' : undefined}
        tabIndex={hasChildren ? 0 : undefined}
        aria-expanded={hasChildren ? expanded : undefined}
      >
        <div className={styles.textBlock}>
          <div className={styles.names}>
            <span className={styles.nameEn}>{category.nameEn}</span>
            <span className={styles.separator}>·</span>
            <span className={styles.nameFa}>{category.nameFa}</span>
            {hasChildren && (
              <span className={`${styles.chevron} ${expanded ? styles.chevronOpen : ''}`}>
                <ChevronRight size={18} />
              </span>
            )}
          </div>
          {category.description && <p className={styles.description}>{category.description}</p>}
        </div>
      </div>

      <div className={styles.controls}>
        <Tooltip label="Add sub category">
          <button
            className={styles.controlBtn}
            onClick={() => onAddSub(category.id)}
            aria-label="Add sub category"
          >
            <FolderPlus size={17} />
          </button>
        </Tooltip>
        <Tooltip label="Remove category">
          <button
            className={`${styles.controlBtn} ${styles.danger}`}
            onClick={() => onRemove(category.id)}
            aria-label="Remove"
          >
            <Trash2 size={17} />
          </button>
        </Tooltip>
      </div>
    </div>
  )
}