---
import Button from "./Button.astro";
import { Icon } from "astro-icon/components";
interface Props {
  type:
    | "text"
    | "number"
    | "password"
    | "email"
    | "date"
    | "time"
    | "file"
    | "checkbox"
    | "radio";
  title?: string;
  name?: string;
  place?: string;
  value?: string;
  isDisabled?: boolean;
  isLabel: boolean;
  LabelClassName?: string;
  InputClassName?: string;
  FormClassName?: string;
  id?: string;
  autocomplete?:string
  //buttons
  IsButton?: {
    aria?: string;
    Title?: string;
    ClassName?: string;
    BtnIcon?: {
      name?: string;
      id?: string;
      ClassName?: string;
    };
  };
  //icon
  Icons?: {
    openEye: { name: string; ClassName?: string ,id?:string};
    closeEye: { name: string; ClassName?: string ,id?:string};
  };
  //password
  IsPassword?: boolean;
}
const {
  title,
  name,
  type,
  place,
  value,
  isDisabled=false,
  isLabel = true,
  InputClassName,
  IsButton = false,
  autocomplete,
  Icons = false,
  IsPassword = false,

  FormClassName,
  LabelClassName,
  id,
  ...rest
} = Astro.props;
---

<div class=`formGroup ${FormClassName ? FormClassName : ''}   `>
  {
    isLabel && (
      <label for={id} class={LabelClassName}>
        {title}
      </label>
    )
  }
  {
    IsButton && (
      <Button
        type="submit"
        aria={IsButton.aria}
        ClassName={` ${IsButton.ClassName ? IsButton.ClassName : ""}`}>
        {IsButton.Title}
        {IsButton.BtnIcon && (
          <Icon
            name={IsButton.BtnIcon.name}
            size={24}
            id={IsButton.BtnIcon.id}
          />
        )}
      </Button>
    )
  }
  {
    IsPassword ? (
      <div class="relative IsPassword ">
        <input
          type={type}
          name={name}
          id={name}
          class={` ${InputClassName}`}
          placeholder={place}
          value={value}
          disabled={isDisabled}
          autocomplete={autocomplete}
          {...rest}
        />

        {Icons && <Icon name={Icons.openEye.name} size={24} id={Icons.openEye.id} class={Icons.openEye.ClassName} />}
        {Icons && (
          <Icon
            name={Icons.closeEye.name}
            size={24}
            id={Icons.closeEye.id}
            class={Icons.closeEye.ClassName} 
          />
        )}
      </div>
    ) : (
      <input
        type={type}
        name={name}
        id={id}
        class={` ${InputClassName ? InputClassName : ""}`}
        placeholder={place}
        value={value}
        disabled={isDisabled}
        autocomplete={autocomplete}
        {...rest}
      />
    )
  }
</div>