import React from 'react';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { CheckCircle } from 'lucide-react';
import { router } from '@inertiajs/react';

interface Package {
  id: number;
  name: string;
  description: string;
  price: number;
}

interface SuccessStepProps {
  package: Package;
}

export default function SuccessStep({ package: pkg }: SuccessStepProps) {
  const { t } = useTranslation('marketing');

  const handleDashboard = () => {
    router.visit('/admin');
  };

  return (
    <Card>
      <CardHeader className="text-center">
        <CheckCircle className="h-16 w-16 text-green-500 mx-auto mb-4" />
        <CardTitle className="text-2xl">{t('success.title')}</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4 text-center">
        <p>{t('success.message', { package: pkg.name })}</p>
        <p className="text-lg font-semibold">
          {pkg.price === 0 ? t('success.free_assigned') : t('success.paid_assigned')}
        </p>
        <Button onClick={handleDashboard} className="w-full">
          {t('success.go_to_dashboard')}
        </Button>
      </CardContent>
    </Card>
  );
}