import { EmptyState } from '@/components/ui/feedback/EmptyState';
import { Stack } from '@/components/ui/layout/Stack';
import { Card, SectionTitle } from './VendorDetail.shared';
import type { VendorDetailData } from './VendorDetail.types';

interface VendorDetailAddressesSectionProps {
  vendor: VendorDetailData;
  t: (key: string) => string;
}

export function VendorDetailAddressesSection({ vendor, t }: VendorDetailAddressesSectionProps) {
  return (
    <div>
      <SectionTitle>{t('section_addresses')}</SectionTitle>
      <Card>
        {vendor.addresses.length === 0 ? (
          <EmptyState title={t('no_address')} className="py-4" />
        ) : (
          <Stack gap="3" as="ul">
            {vendor.addresses.map((address) => (
              <li
                key={address.id}
                className="border-border-default border-b pb-3 last:border-0 last:pb-0"
              >
                <p className="text-text-primary text-sm font-medium" data-user-displayname>
                  {address.label}
                </p>
                <p className="text-text-secondary text-sm" data-user-displayname>
                  {address.fullAddress}
                </p>
              </li>
            ))}
          </Stack>
        )}
      </Card>
    </div>
  );
}