import { ArrayElement } from "@repo/rdx-utils";
import { Building2Icon, FileTextIcon, Mail, Phone, Search, User } from "lucide-react";
import { CustomersListData } from "../../schemas";

interface CustomerCardProps {
  customer: ArrayElement<CustomersListData["items"]>;
}

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'>
        <div className='flex items-center justify-between'>
          <h3 className='font-semibold text-foreground text-lg'>{customer.name}</h3>
          <Search className='size-4 text-muted-foreground' />
        </div>
        <div className='space-y-1 text-sm text-muted-foreground'>
          <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>
  );
};