'use client';

/**
 * CheckoutPage — full-page checkout wrapper (legacy route; buy flow uses CheckoutModal).
 *
 * Mounts CheckoutFlow with defaultOpen so the user lands directly in the
 * card-entry step. Adds page-level chrome (heading, back button).
 */

import { useT } from '@/lib/i18n/react';
import { Button } from '@/components/ui/primitives/Button';
import { Icon } from '@/components/ui/icons/Icon';
import CheckoutFlow, { type CheckoutFlowProps } from '@/features/checkout/CheckoutFlow';

export type CheckoutPageProps = Omit<CheckoutFlowProps, 'defaultOpen'>;

export function CheckoutPage(props: CheckoutPageProps) {
  const t = useT('checkout');
  return (
    <div className="mx-auto w-full max-w-md px-4 py-6">
      <Button variant="ghost" size="sm" onClick={() => window.history.back()} className="mb-4">
        <Icon name="ChevronRight" size="sm" mirror />
        {t('back')}
      </Button>
      <h1 className="text-text-primary mb-4 text-xl font-semibold">{t('checkout_title')}</h1>
      <CheckoutFlow {...props} defaultOpen />
    </div>
  );
}