"use client";
import React, { useState } from "react";
import { User, Mail, Lock, ArrowRight } from "lucide-react";
import ComponentCard from "../../common/ComponentCard";
import Form from "../Form";
import Input from "../input/InputField";
import Checkbox from "../input/Checkbox";
import Label from "../Label";
import Button from "../../ui/button/Button";

export default function ExampleFormWithIcon() {
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
  };

  const [isChecked, setIsChecked] = useState(false);
  return (
    <ComponentCard title="Example Form With Icons">
      <Form onSubmit={handleSubmit}>
        <div className="grid grid-cols-1 gap-6">
          <div className="relative">
            <Input
              type="text"
              placeholder="Username"
              id="username"
              className="pl-11"
            />
            <span className="absolute text-gray-500 -translate-y-1/2 pointer-events-none left-4 top-1/2 dark:text-gray-400">
              <User className="w-5 h-5" />
            </span>
          </div>{" "}
          <div className="relative">
            <Input
              type="text"
              placeholder="Email Address"
              id="email"
              className="pl-11"
            />
            <span className="absolute text-gray-500 -translate-y-1/2 pointer-events-none left-4 top-1/2 dark:text-gray-400">
              <Mail className="w-5 h-5" />
            </span>
          </div>{" "}
          <div className="relative">
            <Input
              type="password"
              placeholder="Password"
              id="password"
              className="pl-11"
            />
            <span className="absolute text-gray-500 -translate-y-1/2 pointer-events-none left-4 top-1/2 dark:text-gray-400">
              <Lock className="w-5 h-5" />
            </span>
          </div>{" "}
          <div className="relative">
            <Input
              type="password"
              placeholder="Confirm Password"
              id="confirm-password"
              className="pl-11"
            />
            <span className="absolute text-gray-500 -translate-y-1/2 pointer-events-none left-4 top-1/2 dark:text-gray-400">
              <Lock className="w-5 h-5" />
            </span>
          </div>
          <div className="flex justify-between">
            <div className="flex items-center gap-3">
              <Checkbox checked={isChecked} onChange={setIsChecked} />
              <Label className="mb-0"> Remember me</Label>
            </div>
            <div>
              <Button size="sm">
                Create Account <ArrowRight className="w-4 h-4" />
              </Button>
            </div>
          </div>
        </div>
      </Form>
    </ComponentCard>
  );
}