import { Pencil, Trash2 } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import type { Brand } from '../types/brand'
import { useT } from '../i18n/useT'
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) {
  const t = useT()
  const { locale } = useLocale()
  const isFa = locale === 'fa'
  const primaryName = isFa ? brand.nameFa || brand.nameEn : brand.nameEn
  const secondaryName = isFa ? (brand.nameFa ? brand.nameEn : '') : brand.nameFa

  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={isFa ? rowStyles.nameFa : rowStyles.nameEn}>{primaryName}</span>
            {secondaryName ? (
              <>
                <span className={rowStyles.separator}>·</span>
                <span className={isFa ? rowStyles.nameEn : rowStyles.nameFa}>{secondaryName}</span>
              </>
            ) : null}
          </div>
          {brand.about && <p className={rowStyles.description}>{brand.about}</p>}
        </div>
      </div>

      <div className={rowStyles.controls}>
        <Tooltip label={t('brands.tooltip.edit')}>
          <button
            className={rowStyles.controlBtn}
            onClick={() => onEdit(brand.id)}
            aria-label={t('brands.tooltip.edit')}
          >
            <Pencil size={17} />
          </button>
        </Tooltip>
        <Tooltip label={t('brands.tooltip.remove')}>
          <button
            className={`${rowStyles.controlBtn} ${rowStyles.danger}`}
            onClick={() => onRemove(brand.id)}
            aria-label={t('brands.tooltip.remove')}
          >
            <Trash2 size={17} />
          </button>
        </Tooltip>
      </div>
    </div>
  )
}