import { Trash2 } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { useT } from '../i18n/useT'
import { Tooltip } from './Tooltip'
import styles from './WebsiteGroupItemCard.module.css'

interface WebsiteGroupItemCardProps {
  title: string
  nameFa?: string | null
  subtitle?: string | null
  onRemove: () => void
  removeTooltip?: string
}

export function WebsiteGroupItemCard({
  title,
  nameFa,
  subtitle,
  onRemove,
  removeTooltip,
}: WebsiteGroupItemCardProps) {
  const t = useT()
  const { locale } = useLocale()
  const isFa = locale === 'fa'
  const removeLabel = removeTooltip ?? t('website.removeFromGroup')
  const primaryName = isFa ? nameFa?.trim() || title : title
  const secondaryName = isFa
    ? nameFa?.trim()
      ? title
      : ''
    : nameFa?.trim() || ''

  return (
    <article className={styles.card} dir={isFa ? 'rtl' : 'ltr'}>
      <div className={styles.text}>
        {isFa ? (
          <>
            <h3 className={`${styles.namePrimary} faText`} lang="fa" dir="rtl">
              {primaryName}
            </h3>
            {secondaryName ? (
              <p className={styles.nameSecondary} lang="en" dir="rtl">
                {secondaryName}
              </p>
            ) : null}
          </>
        ) : (
          <>
            <h3 className={styles.namePrimary} lang="en" dir="ltr">
              {primaryName}
            </h3>
            {secondaryName ? (
              <p className={`${styles.nameSecondary} faText`} lang="fa" dir="rtl">
                {secondaryName}
              </p>
            ) : null}
          </>
        )}
        {subtitle ? <p className={styles.subtitle}>{subtitle}</p> : null}
      </div>

      <div className={styles.controls}>
        <Tooltip label={removeLabel}>
          <button
            type="button"
            className={styles.danger}
            onClick={onRemove}
            aria-label={removeLabel}
          >
            <Trash2 size={16} />
          </button>
        </Tooltip>
      </div>
    </article>
  )
}
