/**
 * VendorRejectedScreen - shown when vendor accountState is REJECTED.
 *
 * Centered layout with:
 *  - Danger icon
 *  - h1 with rejection status
 *  - Optional rejectReason paragraph
 *  - Contact support mailto link
 */

'use client';

import { useT } from '@/lib/i18n/react';
import { SUPPORT_MAILTO } from '@/lib/contact.js';
import { Icon } from '@/components/ui/icons/Icon';
import { Stack } from '@/components/ui/layout/Stack';
import { Button } from '@/components/ui/primitives/Button';
import { VendorShell } from '@/components/ui/layout/VendorShell';

export interface VendorRejectedScreenProps {
  /** Human-readable rejection reason from the vendor row. Optional. */
  rejectReason?: string | null;
}

/**
 * VendorRejectedScreen
 *
 * Full-page rejection notice. Provides a single path forward: contact support.
 *
 * @example
 * ```tsx
 * <VendorRejectedScreen rejectReason="Did not meet licensing requirements" />
 * ```
 */
export function VendorRejectedScreen({ rejectReason }: VendorRejectedScreenProps) {
  const t = useT('vendor_welcome');

  return (
    <VendorShell variant="centered" textCenter showTopbar>
      <div
        aria-labelledby="vendor-rejected-title"
        className="flex w-full max-w-sm flex-col items-center gap-5"
      >
        {/* Decorative icon */}
        <span
          className="bg-danger-100 flex h-[var(--spacing-20)] w-[var(--spacing-20)] items-center justify-center rounded-full"
          aria-hidden="true"
        >
          <Icon name="AlertCircle" size="xl" color="danger" />
        </span>

        <Stack gap="2" align="center">
          <h1 id="vendor-rejected-title" className="text-text-primary text-2xl font-bold">
            {t('status_rejected')}
          </h1>

          {rejectReason && (
            <p className="text-text-secondary text-sm leading-[var(--line-height-relaxed)]">
              {rejectReason}
            </p>
          )}
        </Stack>

        <Button
          variant="secondary"
          size="md"
          asChild
          iconStart={<Icon name="Mail" size="sm" color="inherit" />}
        >
          <a href={SUPPORT_MAILTO}>{t('rejected_contact_support')}</a>
        </Button>
      </div>
    </VendorShell>
  );
}