import { Link } from 'react-router-dom'
import { ArrowLeft, User } from 'lucide-react'
import { Card, CardHeader, CardTitle, CardContent } from '@/components/common/Card'
import { Badge } from '@/components/common/Badge'
import { formatRelativeTime } from '@/utils/formatters'
import { LEAD_STATUS_CONFIG } from '@/utils/constants'
import { t } from '@/lib/i18n'
import type { Lead } from '@/types/lead'

interface RecentLeadsProps {
  leads: Lead[]
}

export function RecentLeads({ leads }: RecentLeadsProps) {
  return (
    <Card>
      <CardHeader className="flex items-center justify-between">
        <CardTitle>{t('Recent Leads')}</CardTitle>
        <Link 
          to="/leads" 
          className="text-sm text-primary-600 hover:text-primary-700 flex items-center gap-1"
        >
          {t('All Leads')}
          <ArrowLeft className="w-4 h-4" />
        </Link>
      </CardHeader>
      <CardContent className="p-0">
        {leads.length === 0 ? (
          <div className="p-6 text-center text-gray-500">
            {t('No new leads')}
          </div>
        ) : (
          <ul className="divide-y divide-gray-100">
            {leads.map((lead) => (
              <li key={lead.id}>
                <Link 
                  to={`/leads/${lead.id}`}
                  className="flex items-center gap-4 p-4 hover:bg-gray-50 transition-colors"
                >
                  <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
                    <User className="w-5 h-5 text-gray-400" />
                  </div>
                  
                  <div className="flex-1 min-w-0">
                    <p className="font-medium text-gray-900 truncate">
                      {lead.name || t('No name')}
                    </p>
                    <p className="text-sm text-gray-500 truncate">
                      {lead.email || lead.phone || t('No contact details')}
                    </p>
                  </div>
                  
                  <div className="text-end flex-shrink-0">
                    <Badge 
                      variant={lead.lead_status === 'converted' ? 'success' : 
                               lead.lead_status === 'new' ? 'info' : 'default'}
                    >
                      {LEAD_STATUS_CONFIG[lead.lead_status]?.label || lead.lead_status}
                    </Badge>
                    <p className="text-xs text-gray-400 mt-1">
                      {formatRelativeTime(lead.created_at)}
                    </p>
                  </div>
                </Link>
              </li>
            ))}
          </ul>
        )}
      </CardContent>
    </Card>
  )
}










