Input states and FormField

"use client";

import { Button, FormField, Input, Textarea } from "@waveinno/ui";
import { CircleCheck, Mail, Phone, Search } from "lucide-react";
import * as React from "react";

export default function InputStates() {
  const [phone, setPhone] = React.useState("01712-34");
  const [note, setNote] = React.useState("Leave the car with the attendant at lane 2.");
  const short = phone.replace(/\D/g, "").length < 11;
  return (
    <div className="grid max-w-2xl gap-4 sm:grid-cols-2">
      <FormField label="Mobile number" htmlFor="pg-phone" required error={short ? "Enter all 11 digits, e.g. 01712-345678." : undefined} hint="We send the receipt here.">
        <Input id="pg-phone" value={phone} onChange={(e) => setPhone(e.target.value)} state={short ? "error" : "success"} leading={<Phone />} trailing={short ? null : <CircleCheck className="text-success" />} />
      </FormField>
      <FormField label="Email" htmlFor="pg-mail" success="Verified">
        <Input id="pg-mail" defaultValue="karim@gulshanparking.com" state="success" leading={<Mail />} />
      </FormField>
      <FormField label="Daily cap" htmlFor="pg-cap" warning="Higher than every other car park in Gulshan.">
        <Input id="pg-cap" defaultValue="1,200" state="warning" leading="৳" trailing="per day" />
      </FormField>
      <FormField label="Search" htmlFor="pg-search" hint="Plate, phone or ticket number.">
        <Input id="pg-search" placeholder="DHAKA METRO-GA 11-4821" leading={<Search />} />
      </FormField>
      <FormField label="Note for the team" htmlFor="pg-note2" count={{ value: note.length, max: 60 }} className="sm:col-span-2" error={note.length > 60 ? "Keep it under 60 characters." : undefined}>
        <Textarea id="pg-note2" value={note} onChange={(e) => setNote(e.target.value)} state={note.length > 60 ? "error" : "default"} />
      </FormField>
      <Button variant="primary" className="w-fit">Save</Button>
    </div>
  );
}