import { Link } from 'react-router-dom';
import Badge from '../UI/Badge';
import { formatRelativeTime } from '../../utils/formatters';

function RecentLeads({ leads }) {
  if (!leads || leads.length === 0) {
    return (
      <div className="bg-white rounded-xl shadow-sm border border-slate-200">
        <div className="flex items-center justify-between px-6 py-4 border-b border-slate-200">
          <h3 className="text-lg font-semibold text-slate-900">Recent Leads</h3>
          <Link to="/leads" className="text-sm text-primary-600 hover:text-primary-700 font-medium">
            View all →
          </Link>
        </div>
        <div className="text-center py-12">
          <svg className="w-12 h-12 mx-auto mb-3 text-slate-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
          </svg>
          <p className="text-slate-500 text-sm">No leads captured yet</p>
          <p className="text-slate-400 text-xs mt-1">Leads will appear here once forms are tracked</p>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-white rounded-xl shadow-sm border border-slate-200">
      <div className="flex items-center justify-between px-6 py-4 border-b border-slate-200">
        <h3 className="text-lg font-semibold text-slate-900">Recent Leads</h3>
        <Link to="/leads" className="text-sm text-primary-600 hover:text-primary-700 font-medium">
          View all →
        </Link>
      </div>
      <div className="divide-y divide-slate-100">
        {leads.map((lead) => (
          <div key={lead.id} className="px-6 py-4 flex items-center justify-between hover:bg-slate-50 transition-colors">
            <div className="flex items-center gap-4">
              <div className="w-9 h-9 rounded-full bg-primary-100 flex items-center justify-center text-primary-600 font-semibold text-sm">
                {lead.email.charAt(0).toUpperCase()}
              </div>
              <div>
                <p className="text-sm font-medium text-slate-900">{lead.email}</p>
                <p className="text-xs text-slate-500">{lead.form_name || 'Unknown Form'}</p>
              </div>
            </div>
            <div className="flex items-center gap-4">
              <Badge status={lead.status} />
              <span className="text-xs text-slate-400 whitespace-nowrap">
                {formatRelativeTime(lead.last_activity)}
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default RecentLeads;