Input, Select, Checkbox, Switch

"use client";

import {
  Checkbox,
  Input,
  Label,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
  Switch,
  Textarea,
} from "@waveinno/ui";
import * as React from "react";

export default function FormFields() {
  const [on, setOn] = React.useState(true);
  return (
    <div className="grid max-w-xl gap-4 sm:grid-cols-2">
      <div className="space-y-1.5">
        <Label htmlFor="pg-name">Name</Label>
        <Input id="pg-name" placeholder="Karim Ahmed" />
      </div>
      <div className="space-y-1.5">
        <Label>City</Label>
        <Select defaultValue="dhaka">
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="dhaka">Dhaka</SelectItem>
            <SelectItem value="ctg">Chattogram</SelectItem>
            <SelectItem value="sylhet">Sylhet</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div className="space-y-1.5 sm:col-span-2">
        <Label htmlFor="pg-note">Note</Label>
        <Textarea id="pg-note" placeholder="Anything the team should know" />
      </div>
      <label className="flex items-center gap-2 text-sm text-body">
        <Checkbox defaultChecked /> Send a receipt
      </label>
      <label className="flex items-center gap-2 text-sm text-body">
        <Switch checked={on} onCheckedChange={setOn} /> Notifications {on ? "on" : "off"}
      </label>
    </div>
  );
}