"use client";

import Image from "next/image";
import { useApp } from "@/contexts/AppContext";

interface ProtocolLinkProps {
  icon: string;
  label: string;
  arrowIcon: string;
}

function ProtocolLink({ icon, label, arrowIcon }: ProtocolLinkProps) {
  return (
    <div className="group cursor-pointer rounded-xl border border-border-gray dark:border-gray-600 bg-bg-subtle dark:bg-gray-700 px-4 py-3.5 flex items-center justify-between w-full transition-all hover:border-black dark:hover:border-gray-400">
      <div className="flex items-center gap-1">
        <Image 
          src={icon} 
          alt="" 
          width={20} 
          height={24} 
          className="transition-all group-hover:scale-110 group-hover:brightness-0 dark:group-hover:brightness-0 dark:group-hover:invert" 
        />
        <span className="text-body-small font-medium text-text-tertiary dark:text-gray-300 transition-all group-hover:font-bold group-hover:scale-[1.02] group-hover:text-text-primary dark:group-hover:text-white">
          {label}
        </span>
      </div>
      <Image 
        src={arrowIcon} 
        alt="" 
        width={20} 
        height={24} 
        className="transition-all group-hover:scale-110 group-hover:brightness-0 dark:group-hover:brightness-0 dark:group-hover:invert" 
      />
    </div>
  );
}

export default function ProtocolInformation() {
  const { t } = useApp();

  return (
    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 px-6 py-8 flex flex-col gap-4 overflow-y-auto">
      <h3 className="text-body-large font-bold text-text-primary dark:text-white">
        {t("protocol.title")}
      </h3>
      <div className="flex flex-col gap-2">
        <ProtocolLink
          icon="/component-17.svg"
          label={t("protocol.whitepaper")}
          arrowIcon="/component-18.svg"
        />
        <ProtocolLink
          icon="/component-19.svg"
          label={t("protocol.documentation")}
          arrowIcon="/component-110.svg"
        />
        <ProtocolLink
          icon="/component-111.svg"
          label={t("protocol.github")}
          arrowIcon="/component-112.svg"
        />
      </div>
    </div>
  );
}