import { Trash2 } from 'lucide-react'
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 = 'Remove from group',
}: WebsiteGroupItemCardProps) {
  return (
    <article className={styles.card}>
      <div className={styles.text}>
        <h3 className={styles.nameEn}>{title}</h3>
        {nameFa && <p className={styles.nameFa}>{nameFa}</p>}
        {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
      </div>

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