import { Pill } from '@/components/ui/primitives/Pill';
import { Card, InfoRow, SectionTitle, StripeOnboardingBadge } from './VendorDetail.shared';
import type { VendorDetailData } from './VendorDetail.types';

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

export function VendorDetailPaymentsSection({ vendor, t }: VendorDetailPaymentsSectionProps) {
  return (
    <div>
      <SectionTitle>{t('section_payments')}</SectionTitle>
      <Card>
        <dl>
          <InfoRow
            label={t('field_stripe_state')}
            value={<StripeOnboardingBadge state={vendor.stripeOnboardingState} />}
          />
          <InfoRow
            label={t('field_stripe_charges')}
            value={
              <Pill tone={vendor.stripeChargesEnabled ? 'success' : 'neutral'} size="sm">
                {vendor.stripeChargesEnabled ? t('stripe_enabled') : t('stripe_disabled')}
              </Pill>
            }
          />
          <InfoRow
            label={t('field_stripe_payouts')}
            value={
              <Pill tone={vendor.stripePayoutsEnabled ? 'success' : 'neutral'} size="sm">
                {vendor.stripePayoutsEnabled ? t('stripe_enabled') : t('stripe_disabled')}
              </Pill>
            }
          />
          {vendor.stripeAccountId && (
            <InfoRow
              label={t('field_stripe_account_id')}
              value={<span className="font-mono text-xs">{vendor.stripeAccountId}</span>}
            />
          )}
          {vendor.stripeRequirementsCurrentlyDue &&
            vendor.stripeRequirementsCurrentlyDue.length > 0 && (
              <InfoRow
                label={t('field_stripe_requirements')}
                value={
                  <ul className="list-disc ps-4 text-sm">
                    {vendor.stripeRequirementsCurrentlyDue.map((requirement) => (
                      <li key={requirement} className="text-text-secondary">
                        {requirement}
                      </li>
                    ))}
                  </ul>
                }
              />
            )}
        </dl>
      </Card>
    </div>
  );
}