import { useState } from 'react';
import { useT } from '@/lib/i18n/react';
import { InlineNotice } from '@/components/ui/feedback/InlineNotice';

export interface VendorStripeStatusBannerProps {
  stripeAccountId: string | null;
  stripeOnboardingState: string | null;
}

export function VendorStripeStatusBanner({
  stripeAccountId,
  stripeOnboardingState,
}: VendorStripeStatusBannerProps) {
  const t = useT('vendor_dashboard');
  const [dismissed, setDismissed] = useState(false);

  if (!stripeAccountId) return null;
  if (stripeOnboardingState !== 'account_created' && stripeOnboardingState !== 'kyc_pending')
    return null;
  if (dismissed) return null;

  if (stripeOnboardingState === 'account_created') {
    return (
      <div className="mb-4">
        <InlineNotice
          tone="warning"
          title={t('stripe_banner_account_created_title')}
          description={t('stripe_banner_account_created_body')}
          onDismiss={() => setDismissed(true)}
        />
        <div className="mt-2 ps-3">
          <a
            href="/vendor/settings/payments"
            className="text-text-link hover:text-text-link-hover text-sm font-medium underline transition-colors duration-[var(--duration-fast)]"
          >
            {t('stripe_banner_cta')}
          </a>
        </div>
      </div>
    );
  }

  // kyc_pending
  return (
    <div className="mb-4">
      <InlineNotice
        tone="info"
        title={t('stripe_banner_kyc_pending_title')}
        description={t('stripe_banner_kyc_pending_body')}
        onDismiss={() => setDismissed(true)}
      />
    </div>
  );
}