"use client";
import { useState } from "react";

export default function Types() {
  const [state, setState] = useState<number>(0);

  return (
    <div className="flex items-center gap-2">
      <button
        onClick={() => {
          setState(0);
        }}
        className={`py-1.5 px-2 border border-[#09C04C] ${
          state === 0 ? "bg-[#09C04C]" : "bg-[#121A15]"
        } rounded-xl flex items-center gap-1.5 text-base font-medium text-white duration-200`}
      >
        <svg
          width="18"
          height="18"
          viewBox="0 0 18 18"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M15.2656 2.73445C13.8814 1.3503 9.95415 3.03341 6.49378 6.49378C3.03341 9.95415 1.3503 13.8814 2.73445 15.2656C4.1186 16.6497 8.04585 14.9666 11.5062 11.5062C14.9666 8.04585 16.6497 4.1186 15.2656 2.73445Z"
            stroke="#09C04C"
            strokeWidth="1.125"
            strokeLinecap="round"
            strokeLinejoin="round"
            className={`${
              state === 0 ? "stroke-white" : "stroke-[#09C04C]"
            } duration-200`}
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M2.73445 2.73445C1.3503 4.1186 3.03341 8.04585 6.49378 11.5062C9.95415 14.9666 13.8814 16.6497 15.2656 15.2656C16.6497 13.8814 14.9666 9.95415 11.5062 6.49378C8.04585 3.03341 4.1186 1.3503 2.73445 2.73445Z"
            stroke="#09C04C"
            strokeWidth="1.125"
            strokeLinecap="round"
            strokeLinejoin="round"
            className={`${
              state === 0 ? "stroke-white" : "stroke-[#09C04C]"
            } duration-200`}
          />
          <path
            d="M9.00675 9H9"
            stroke="#09C04C"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
            className={`${
              state === 0 ? "stroke-white" : "stroke-[#09C04C]"
            } duration-200`}
          />
        </svg>
        DeepThink(R1)
      </button>

      <button
        onClick={() => {
          setState(1);
        }}
        className={`py-1.5 px-2 border border-[#09C04C] ${
          state === 1 ? "bg-[#09C04C]" : "bg-[#121A15]"
        } rounded-xl flex items-center gap-1.5 text-base font-medium text-white duration-200`}
      >
        <svg
          width="18"
          height="18"
          viewBox="0 0 18 18"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z"
            stroke="white"
            strokeWidth="1.125"
            className={`${
              state === 1 ? "stroke-white" : "stroke-[#09C04C]"
            } duration-200`}
          />
          <path
            d="M6 9C6 13.5 9 16.5 9 16.5C9 16.5 12 13.5 12 9C12 4.5 9 1.5 9 1.5C9 1.5 6 4.5 6 9Z"
            stroke="white"
            strokeWidth="1.125"
            strokeLinejoin="round"
            className={`${
              state === 1 ? "stroke-white" : "stroke-[#09C04C]"
            } duration-200`}
          />
          <path
            d="M15.75 11.25H2.25"
            stroke="white"
            strokeWidth="1.125"
            strokeLinecap="round"
            strokeLinejoin="round"
            className={`${
              state === 1 ? "stroke-white" : "stroke-[#09C04C]"
            } duration-200`}
          />
          <path
            d="M15.75 6.75H2.25"
            stroke="white"
            strokeWidth="1.125"
            strokeLinecap="round"
            strokeLinejoin="round"
            className={`${
              state === 1 ? "stroke-white" : "stroke-[#09C04C]"
            } duration-200`}
          />
        </svg>
        Search
      </button>
    </div>
  );
}
