'use client';

import { useState } from 'react';
import { useLanguage } from '@/context/LanguageContext';
import { contactsApi } from '@/lib/api';
import Button from '@/components/ui/Button';
import Input from '@/components/ui/Input';
import toast from 'react-hot-toast';

export default function NewsletterForm() {
  const { t } = useLanguage();
  const [email, setEmail] = useState('');
  const [subscribing, setSubscribing] = useState(false);

  const handleSubscribe = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!email) return;

    setSubscribing(true);
    try {
      await contactsApi.subscribe(email);
      toast.success(t('home.newsletter.success'));
      setEmail('');
    } catch (error) {
      toast.error(t('home.newsletter.error'));
    } finally {
      setSubscribing(false);
    }
  };

  return (
    <form onSubmit={handleSubscribe} className="mt-8 flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
      <Input
        type="email"
        placeholder={t('home.newsletter.placeholder')}
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        className="flex-1 bg-white/10 border-white/20 text-white placeholder:text-gray-400"
        required
      />
      <Button type="submit" isLoading={subscribing}>
        {t('home.newsletter.button')}
      </Button>
    </form>
  );
}
