'use client'

import clsx from "clsx";
import { Icon } from "@iconify/react";
import { useState } from "react";

export function Input ({ className, type, ...props }: React.ComponentProps<'input'>) {
  return (
    <input
      type={type}
      className={clsx("block py-3 px-4 bg-background text-white border border-primary", className)}
      {...props}
    />
  )
}

export function Submit ({ className, type, ...props }: React.ComponentProps<'button'>) {
  return (
    <button
      type={'submit'}
      className={clsx("block py-3 px-4 bg-primary disabled:bg-primary-darker text-background", className)}
      {...props}
    />
  )
}

interface CheckboxInputProps {
  name: string,
  placeholder: string,
  onChange: (value: boolean) => void
}

export function CheckboxInput ({ placeholder, name, onChange }: CheckboxInputProps) {
  const [checked, setCheck] = useState(false);

  const onClick = () => {
    setCheck(c => !c);
    onChange(!checked);
  }

  return (
    <div className="">
      <button type="button" id={`checkbox-${name}`} className="inline-block bg-none border border-primary w-4 h-4" onClick={onClick}>
        {checked && <Icon icon="lucide:check" className="text-primary" />}
      </button>
      <label htmlFor={`checkbox-${name}`} className="ps-2 inline-block">{placeholder}</label>
    </div>
  )
}