import { Pencil, Trash2 } from 'lucide-react'
import type { Brand } from '../types/brand'
import { Tooltip } from './Tooltip'
import rowStyles from './CategoryRow.module.css'
import styles from './BrandRow.module.css'

interface BrandRowProps {
  brand: Brand
  onEdit: (id: string) => void
  onRemove: (id: string) => void
}

export function BrandRow({ brand, onEdit, onRemove }: BrandRowProps) {
  return (
    <div className={rowStyles.row}>
      <div className={styles.info}>
        {brand.imageUrl && (
          <img src={brand.imageUrl} alt="" className={styles.logo} />
        )}
        <div className={rowStyles.textBlock}>
          <div className={rowStyles.names}>
            <span className={rowStyles.nameEn}>{brand.nameEn}</span>
            {brand.nameFa && (
              <>
                <span className={rowStyles.separator}>·</span>
                <span className={rowStyles.nameFa}>{brand.nameFa}</span>
              </>
            )}
          </div>
          {brand.about && <p className={rowStyles.description}>{brand.about}</p>}
        </div>
      </div>

      <div className={rowStyles.controls}>
        <Tooltip label="Edit brand">
          <button
            className={rowStyles.controlBtn}
            onClick={() => onEdit(brand.id)}
            aria-label="Edit brand"
          >
            <Pencil size={17} />
          </button>
        </Tooltip>
        <Tooltip label="Remove brand">
          <button
            className={`${rowStyles.controlBtn} ${rowStyles.danger}`}
            onClick={() => onRemove(brand.id)}
            aria-label="Remove brand"
          >
            <Trash2 size={17} />
          </button>
        </Tooltip>
      </div>
    </div>
  )
}
