import { Html } from "@react-three/drei";
import { View } from "../scene/consts";

interface CreditsProps {
  currentView: View;
}

export const Credits = ({ currentView }: CreditsProps) => {
  return (
    <Html
      transform
      receiveShadow
      castShadow
      pointerEvents={currentView === View.CreditsView ? "auto" : "none"}
      occlude="blending"
      className="w-[1452px] h-[810px] bg-neutral-400"
      scale={10}
      position={[0, 170, 0.5]}
      raycast={currentView === View.CreditsView ? () => null : undefined}
      distanceFactor={10}
    >
      <h1 className="text-9xl font-bold text-center py-24">Credits</h1>
      <ul
        className={`pointer-events-${
          currentView === View.CreditsView ? "auto" : "none"
        } w-full mx-24 text-blue-800 text-5xl`}
      >
        <li className="mb-4 text-black">
          <a
            className="hover:underline text-blue-800"
            href="https://poly.pizza/m/BfrWTbXWBl"
            target="_blank"
          >
            L Shaped Desk by
          </a>
          {" by "}
          <a
            className="hover:underline text-blue-800"
            href="https://poly.pizza/u/Zsky"
            target="_blank"
          >
            Zsky [CC-BY]
          </a>
        </li>
        <li className="mb-4 text-black">
          <a
            className="hover:underline text-blue-800"
            href="https://poly.pizza/m/dCEsSsJJ1Md"
            target="_blank"
          >
            Office Chair
          </a>
          {" by "}
          <a
            className="hover:underline text-blue-800"
            href="https://poly.pizza/u/CMHT%20Oculus"
            target="_blank"
          >
            CMHT Oculus [CC-BY]
          </a>
        </li>
        <li className="mb-4 text-black">
          <a
            className="hover:underline text-blue-800"
            href="https://poly.pizza/m/S5sNqsyyOs"
            target="_blank"
          >
            Mousepad
          </a>
          {" by "}
          <a
            className="hover:underline text-blue-800"
            href="https://poly.pizza/u/dook"
            target="_blank"
          >
            dook [CC-BY]
          </a>
        </li>
        <li className="mb-4 text-black">
          <a
            className="hover:underline text-blue-800"
            href="https://poly.pizza/m/eLUe9OMQrj"
            target="_blank"
          >
            Soldering Iron
          </a>
          {" by "}
          <a
            className="hover:underline text-blue-800"
            href="https://poly.pizza/u/J-Toastie"
            target="_blank"
          >
            J-Toastie [CC-BY]
          </a>
        </li>
        <li className="mb-4">
          <p className="text-black">
            <a
              className="hover:underline text-blue-800"
              href="https://poly.pizza/m/uJDWrSJGVH"
              target="_blank"
            >
              Light Desk
            </a>
            {", "}
            <a
              className="hover:underline text-blue-800"
              href="https://poly.pizza/m/7H5qKjuxVY"
              target="_blank"
            >
              Rug
            </a>
            {", and "}
            <a
              className="hover:underline text-blue-800"
              href="https://poly.pizza/m/EipzkrS9nG"
              target="_blank"
            >
              Window Large
            </a>
            {" by "}
            <a
              className="hover:underline text-blue-800"
              href="https://poly.pizza/u/Quaternius"
              target="_blank"
            >
              Quaternius [CC0]
            </a>
          </p>
        </li>
        <li className="flex">
          <p className="text-black">
            {"All other models by "}
            <a
              className="hover:underline text-blue-800"
              href="https://poly.pizza/u/Poly%20by%20Google"
              target="_blank"
            >
              Poly by Google [CC-BY]
            </a>
          </p>
        </li>
      </ul>
    </Html>
  );
};
