import { format } from 'date-fns'
import { Clock } from 'lucide-react'
import { getInitials } from '../utils/api'
import BrandBadge from './BrandBadge'
import { useLanguage } from '../i18n/LanguageContext'

export default function KanbanCard({ title, thumbnail, brandName, tags, assigneeName, date, dateOverdue, onClick, children }) {
  const { t } = useLanguage()

  return (
    <div
      onClick={onClick}
      className="bg-white rounded-lg p-3 border border-border hover:border-brand-primary/30 cursor-pointer transition-all group overflow-hidden"
    >
      {/* Thumbnail */}
      {thumbnail && (
        <div className="w-[calc(100%+1.5rem)] h-32 -mx-3 -mt-3 mb-2 rounded-t-lg overflow-hidden">
          <img src={thumbnail} alt="" className="w-full h-full object-cover" />
        </div>
      )}

      {/* Title */}
      <h5 className="text-sm font-medium text-text-primary line-clamp-2 leading-snug mb-2">{title}</h5>

      {/* Tags row: brand + extra tags */}
      <div className="flex items-center gap-2 flex-wrap">
        {brandName && <BrandBadge brand={brandName} />}
        {tags}
      </div>

      {/* Footer: assignee + date */}
      <div className="flex items-center justify-between mt-3 pt-2 border-t border-border-light">
        {assigneeName ? (
          <div className="flex items-center gap-1.5">
            <div className="w-5 h-5 rounded-full bg-brand-primary/10 text-brand-primary flex items-center justify-center text-[10px] font-semibold">
              {getInitials(assigneeName)}
            </div>
            <span className="text-xs text-text-tertiary">{assigneeName}</span>
          </div>
        ) : (
          <span className="text-xs text-text-tertiary">{t('common.unassigned')}</span>
        )}

        {date && (
          <span className={`text-[10px] flex items-center gap-1 ${dateOverdue ? 'text-red-500 font-medium' : 'text-text-tertiary'}`}>
            <Clock className="w-3 h-3" />
            {format(new Date(date), 'MMM d')}
          </span>
        )}
      </div>

      {/* Optional extra content (quick actions, delete overlay, etc.) */}
      {children}
    </div>
  )
}
