Form Component

import { Form, Input, NumberInput, Select, TextArea, Checkbox, RadioGroup } 
  from '@featherstudio/react-daisyui-kit';

export default function MyForm() {
  const handleFinish = (values) => {
    console.log('Form values:', values);
    alert(JSON.stringify(values, null, 2));
  };

  const handleValuesChange = (changedValues, allValues) => {
    console.log('Changed:', changedValues);
  };

  return (
    <Form
      onFinish={handleFinish}
      onValuesChange={handleValuesChange}
      initialValues={{ gender: 'male', age: 18 }}
    >
      <Form.Item name="username" label="Username" required
        rules={[
          { min: 3, message: 'Min 3 characters' },
          { max: 20, message: 'Max 20 characters' }
        ]}
      >
        <Input placeholder="Enter username" />
      </Form.Item>

      <Form.Item name="email" label="Email" required
        rules={[
          { 
            pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
            message: 'Invalid email format'
          }
        ]}
      >
        <Input type="email" placeholder="your@email.com" />
      </Form.Item>

      <Form.Item name="age" label="Age" required>
        <NumberInput min={1} max={100} />
      </Form.Item>

      <Form.Item name="gender" label="Gender" required>
        <RadioGroup
          options={[
            { label: 'Male', value: 'male' },
            { label: 'Female', value: 'female' },
            { label: 'Other', value: 'other' }
          ]}
          direction="horizontal"
        />
      </Form.Item>

      <Form.Item name="country" label="Country" required>
        <Select
          placeholder="Select country"
          options={[
            { label: 'Taiwan', value: 'tw' },
            { label: 'USA', value: 'us' },
            { label: 'Japan', value: 'jp' }
          ]}
        />
      </Form.Item>

      <Form.Item name="bio" label="Bio">
        <TextArea placeholder="Tell us about yourself" rows={3} />
      </Form.Item>

      <Form.Item name="agree" required
        rules={[
          {
            validator: async (value) => {
              if (!value) return 'You must agree';
              return '';
            }
          }
        ]}
      >
        <Checkbox label="I agree to terms and conditions" />
      </Form.Item>

      <div className="flex gap-3">
        <button type="button" className="btn btn-ghost">
          Reset
        </button>
        <button type="submit" className="btn btn-primary">
          Submit
        </button>
      </div>
    </Form>
  );
}