import { useState } from "react";
import ComponentCard from "../../../components/common/ComponentCard";
import PageMeta from "../../../components/common/PageMeta";
import { Dropdown } from "../../../components/ui/dropdown/Dropdown";
import { DropdownItem } from "../../../components/ui/dropdown/DropdownItem";
import Button from "../../../components/ui/button/Button";

export default function Dropdowns() {
  const [dropdown1, setDropdown1] = useState(false);
  const [dropdown2, setDropdown2] = useState(false);
  const [dropdown3, setDropdown3] = useState(false);

  return (
    <>
      <PageMeta
        title="React.js Dropdowns Dashboard | TailAdmin - React.js Admin Dashboard Template"
        description="This is React.js Dropdowns Dashboard page for TailAdmin - React.js Tailwind CSS Admin Dashboard Template"
      />
      <div className="space-y-5 sm:space-y-6">
        <ComponentCard title="Default Dropdown">
          <div className="relative inline-block">
            <Button onClick={() => setDropdown1(!dropdown1)}>
              Dropdown Default
            </Button>
            <Dropdown
              isOpen={dropdown1}
              onClose={() => setDropdown1(false)}
              className="w-48 p-2 mt-2"
            >
              <DropdownItem
                onItemClick={() => setDropdown1(false)}
                className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
              >
                Edit
              </DropdownItem>
              <DropdownItem
                onItemClick={() => setDropdown1(false)}
                className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
              >
                Delete
              </DropdownItem>
            </Dropdown>
          </div>
        </ComponentCard>

        <ComponentCard title="Dropdown with Divider">
          <div className="relative inline-block">
            <Button onClick={() => setDropdown2(!dropdown2)}>
              Dropdown with Divider
            </Button>
            <Dropdown
              isOpen={dropdown2}
              onClose={() => setDropdown2(false)}
              className="w-48 p-2 mt-2"
            >
              <DropdownItem
                onItemClick={() => setDropdown2(false)}
                className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
              >
                Edit
              </DropdownItem>
              <DropdownItem
                onItemClick={() => setDropdown2(false)}
                className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
              >
                View
              </DropdownItem>
              <div className="my-2 border-t border-gray-200 dark:border-gray-800"></div>
              <DropdownItem
                onItemClick={() => setDropdown2(false)}
                className="flex items-center gap-3 px-3 py-2 font-medium text-red-600 rounded-lg text-theme-sm hover:bg-red-50 hover:text-red-700 dark:text-red-400 dark:hover:bg-red-900/20 dark:hover:text-red-300"
              >
                Delete
              </DropdownItem>
            </Dropdown>
          </div>
        </ComponentCard>

        <ComponentCard title="Dropdown with Icon">
          <div className="relative inline-block">
            <Button onClick={() => setDropdown3(!dropdown3)}>
              Dropdown with Icon
            </Button>
            <Dropdown
              isOpen={dropdown3}
              onClose={() => setDropdown3(false)}
              className="w-48 p-2 mt-2"
            >
              <DropdownItem
                onItemClick={() => setDropdown3(false)}
                className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
              >
                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                </svg>
                Edit
              </DropdownItem>
              <DropdownItem
                onItemClick={() => setDropdown3(false)}
                className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
              >
                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    fillRule="evenodd"
                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                    clipRule="evenodd"
                  />
                </svg>
                View
              </DropdownItem>
              <div className="my-2 border-t border-gray-200 dark:border-gray-800"></div>
              <DropdownItem
                onItemClick={() => setDropdown3(false)}
                className="flex items-center gap-3 px-3 py-2 font-medium text-red-600 rounded-lg text-theme-sm hover:bg-red-50 hover:text-red-700 dark:text-red-400 dark:hover:bg-red-900/20 dark:hover:text-red-300"
              >
                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    fillRule="evenodd"
                    d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
                    clipRule="evenodd"
                  />
                </svg>
                Delete
              </DropdownItem>
            </Dropdown>
          </div>
        </ComponentCard>
      </div>
    </>
  );
}