import React from 'react';
import { useForm } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Alert, AlertDescription } from '@/components/ui/alert';

interface PaymentFormProps {
  packageId: number;
  packagePrice: number; // Add price as prop
  onSuccess?: () => void;
}

export default function PaymentForm({ packageId, packagePrice, onSuccess }: PaymentFormProps) {
  const { t } = useTranslation('marketing');
  const { data, setData, post, processing, errors, setError } = useForm({
    package_id: packageId,
    payment: '', // For error messages
  });

  const handlePaymentSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setError('payment', t('payment.coming_soon') || 'Zahlungssystem wird bald verfügbar sein. Kontaktieren Sie uns für weitere Details.');
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t('payment.title')}</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <form onSubmit={handlePaymentSubmit} className="space-y-4">
          <div className="text-center text-sm text-muted-foreground">
            {t('payment.placeholder') || 'Das Zahlungssystem wird bald eingerichtet. Bitte kontaktieren Sie uns für den Kauf des Pakets.'}
          </div>
          <Alert>
            <AlertDescription>
              {t('payment.contact_us') || 'Kontaktieren Sie uns unter support@fotospiel.de für den Kauf.'}
            </AlertDescription>
          </Alert>
          <Button type="submit" className="w-full" disabled={processing}>
            {processing ? 'Wird verarbeitet...' : t('payment.contact') || 'Kontaktieren'}
          </Button>
        </form>
      </CardContent>
    </Card>
  );
}