"use client";

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { InputHTMLAttributes, useId } from "react"
import LabelStyle from "../dashboard/label-style";

type TInputFieldProps = {
  label?: string;
  id?: string;
  variant?: "default" | "ghost";
} & InputHTMLAttributes<HTMLInputElement>

const InputField = ({ label, id, variant = "default", ...props }: TInputFieldProps) => {
  const generatedId = useId();
  const inputId = id || generatedId;

  return (
    <div className="grid w-full max-w-sm items-center gap-3">
      {label && <Label htmlFor={inputId}><LabelStyle>{label}</LabelStyle></Label>}
      <Input id={inputId} variant={variant} {...props} />
    </div>
  )
}

export default InputField