import { Building2Icon, FileTextIcon, Mail, Phone, User } from "lucide-react";
import { CustomerSummary } from "../../schemas";

interface CustomerCardProps {
  customer: CustomerSummary;
}

export const CustomerCard = ({ customer }: CustomerCardProps) => {
  return (
    <div className='flex items-start gap-4'>
      <div className='flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 border border-primary/20'>
        <User className='h-6 w-6 text-primary' />
      </div>
      <div className='flex-1 space-y-2'>
        <p className='text-left font-semibold text-foreground text-base'>{customer.name}</p>
        <div className='space-y-1 text-sm text-muted-foreground'>
          {customer.email_primary && (
            <div className='flex items-center gap-2'>
              <Mail className='h-3 w-3' />
              {customer.email_primary}
            </div>
          )}

          {customer.mobile_primary && (
            <div className='flex items-center gap-2'>
              <Phone className='h-3 w-3' />
              {customer.mobile_primary}
            </div>
          )}
          {customer.trade_name && (
            <div className='flex items-center gap-2'>
              <Building2Icon className='h-3 w-3' />
              {customer.trade_name}
            </div>
          )}
          {customer.tin && (
            <div className='flex items-center gap-2'>
              <FileTextIcon className='h-3 w-3' />
              {customer.tin}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};