Form field

"use client";

import { useState } from "react";
import { CruiseCombobox } from "@/components/cruise/combobox";
import { CruiseFormField } from "@/components/cruise/form-field";
import { CruiseInput } from "@/components/cruise/input";
import { CruiseSelect } from "@/components/cruise/select";

const states = ["Lagos", "Oyo", "Rivers", "Kano", "Enugu", "FCT"].map((label) => ({
  value: label.toLowerCase(),
  label,
}));

export default function FormFieldExample() {
  const [name, setName] = useState("");
  return (
    <div className="grid gap-6 md:grid-cols-2">
      <CruiseFormField
        label="Full name"
        required
        hint="As it appears on your ID."
        error={name.length === 1 ? "Enter your full name." : undefined}
      >
        <CruiseInput value={name} onChange={(event) => setName(event.target.value)} autoComplete="name" />
      </CruiseFormField>
      <CruiseFormField label="Delivery time" hint="We'll text you when the rider leaves.">
        <CruiseSelect defaultValue="morning">
          <option value="morning">Morning (8am – 12 noon)</option>
          <option value="evening">Evening (4pm – 8pm)</option>
        </CruiseSelect>
      </CruiseFormField>
      <CruiseFormField label="State" error="Choose your state.">
        <CruiseCombobox items={states} placeholder="Search states" />
      </CruiseFormField>
    </div>
  );
}