import { useState } from 'react';
import './blocks.css';

export interface ContactFormBlockProps {
  title?: string;
  subtitle?: string;
  fields?: Array<{
    name: string;
    label: string;
    type: 'text' | 'email' | 'tel' | 'textarea';
    required?: boolean;
    placeholder?: string;
  }>;
  submitLabel?: string;
  onSubmit?: (data: Record<string, string>) => void;
}

export function ContactFormBlock({ 
  title, 
  subtitle, 
  fields = [
    { name: 'name', label: 'Name', type: 'text', required: true },
    { name: 'email', label: 'Email', type: 'email', required: true },
    { name: 'message', label: 'Message', type: 'textarea', required: true },
  ],
  submitLabel = 'Submit',
  onSubmit 
}: ContactFormBlockProps) {
  const [formData, setFormData] = useState<Record<string, string>>({});

  const handleChange = (name: string, value: string) => {
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSubmit?.(formData);
  };

  return (
    <section className="shared-contact-form">
      {title && <h2 className="shared-contact-form__title">{title}</h2>}
      {subtitle && <p className="shared-contact-form__subtitle">{subtitle}</p>}
      <form onSubmit={handleSubmit} className="shared-contact-form__form">
        {fields.map((field) => (
          <div key={field.name} className="shared-contact-form__field">
            <label htmlFor={field.name} className="shared-contact-form__label">
              {field.label}
              {field.required && <span className="shared-contact-form__required">*</span>}
            </label>
            {field.type === 'textarea' ? (
              <textarea
                id={field.name}
                name={field.name}
                required={field.required}
                placeholder={field.placeholder}
                value={formData[field.name] || ''}
                onChange={(e) => handleChange(field.name, e.target.value)}
                className="shared-contact-form__input"
                rows={4}
              />
            ) : (
              <input
                id={field.name}
                name={field.name}
                type={field.type}
                required={field.required}
                placeholder={field.placeholder}
                value={formData[field.name] || ''}
                onChange={(e) => handleChange(field.name, e.target.value)}
                className="shared-contact-form__input"
              />
            )}
          </div>
        ))}
        <button type="submit" className="shared-button shared-button--primary">
          {submitLabel}
        </button>
      </form>
    </section>
  );
}

