// features/{{kebabCase featureName}}/components/create-{{kebabCase featureName}}-form.tsx
'use client';

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { useCreate{{pascalCase featureName}} } from '@/features/{{kebabCase featureName}}/hooks/use-create-{{kebabCase featureName}}';
import { create{{pascalCase featureName}}Schema, type Create{{pascalCase featureName}}Input } from '@/features/{{kebabCase featureName}}/types/{{kebabCase featureName}}.schemas';

interface Create{{pascalCase featureName}}FormProps {
  onSuccess?: () => void;
}

export function Create{{pascalCase featureName}}Form({ onSuccess }: Create{{pascalCase featureName}}FormProps) {
  const form = useForm<Create{{pascalCase featureName}}Input>({
    resolver: zodResolver(create{{pascalCase featureName}}Schema),
    defaultValues: { name: '' },
  });

  const { mutate: create{{pascalCase featureName}}, isPending } = useCreate{{pascalCase featureName}}();

  function onSubmit(values: Create{{pascalCase featureName}}Input) {
    create{{pascalCase featureName}}(values, {
      onSuccess: () => { form.reset(); onSuccess?.(); },
      onError: (error) => { form.setError('root', { message: error.message }); },
    });
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <FormField
          control={form.control}
          name="name"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Name</FormLabel>
              <FormControl>
                <Input placeholder="Enter name" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        {form.formState.errors.root && (
          <p className="text-sm text-destructive">{form.formState.errors.root.message}</p>
        )}
        <Button type="submit" disabled={isPending}>
          {isPending ? 'Creating...' : 'Create {{pascalCase featureName}}'}
        </Button>
      </form>
    </Form>
  );
}