"use client";
import { BreadcrumbResponsive } from "@/components/ui/Breadcrumb/Brdcrb";
import { Icon1 } from "@/public";
import { useEffect, useState } from "react";
import RadioDropdown from "@/components/ui/Dropdown/RadioDropdown";
import { RadioGroup } from "@/components/ui/radio-group";
export default function Home() {
  const items = [
    { href: "#", label: "Item 1" },
    { href: "#", label: "Item 2" },
    { href: "#", label: "Item 3" },
    { href: "#", label: "Item 4" },
    { href: "#", label: "Item 5" },
    { href: "#", label: "Item 6" },
    { href: "#", label: "Item 7" },
    { href: "#", label: "Item 8" },
    { href: "#", label: "Item 9" },
    { href: "#", label: "Item 10" },
    { href: "#", label: "Item 11" },
    { href: "#", label: "Item 12" },
    { href: "#", label: "Item 13" },
  ];

  const options = [
    { id: "1", label: "HI" },
    { id: "2", label: "HII" },
    { id: "3", label: "HIII" },
    { id: "4", label: "HIIII" },
  ];

  const [open, setOpen] = useState(false);

  const [state, setState] = useState("");
      

  const handleOptionSelect = (id: any) => {
    setState(id);
  };

  useEffect(() => {
    console.log("Selected Option for RadioDropDown is : " , state)
  }, [state])
    
  const [state1, setState1] = useState("");

  const handleOptionSelect1 = (id: any) => {
    setState1(id);
  };

  useEffect(() => {
    console.log("Selected Option for Radio Options is  : " , state1)
  }, [state1])

  return (
    <div>
      <BreadcrumbResponsive items={items} ITEMS_TO_DISPLAY={8} />

      <RadioDropdown
        open={open}
        onOpenChange={setOpen}
        options={options}
        search={true}
        icon={<Icon1 />}
        onSelect={handleOptionSelect}
      />

      <RadioGroup
        type={"full"}
        options={[
          { id: "option-one", label: "Option One" },
          { id: "option-two", label: "Option Two" },
          { id: "option-three", label: "Option Three" },
        ]}
        defaultValue="option-one"
        onSelect={handleOptionSelect1}
      />
    </div>
  );
}
