"use client";

import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/app/shadcn_components/ui/tooltip";

export function CurrentEpcTooltip() {
  return (
    <TooltipProvider delayDuration={200}>
      <Tooltip>
        <TooltipTrigger asChild>
          <button
            className="inline-flex items-center justify-center w-4 h-4 rounded-full text-gray-400 hover:text-brandblue transition-colors focus:outline-none"
            aria-label="Current EPC rating explanation"
          >
            <QuestionMarkCircleIcon className="w-4 h-4" />
          </button>
        </TooltipTrigger>
        <TooltipContent
          side="right"
          className="max-w-xs p-0 overflow-hidden border-gray-200 shadow-xl"
          sideOffset={8}
        >
          <div className="px-4 pt-3 pb-2 bg-gray-50 border-b border-gray-100">
            <p className="text-xs font-bold text-gray-700 uppercase tracking-widest">Current EPC Rating</p>
            <p className="text-[11px] text-gray-400 mt-0.5">How we calculate this rating</p>
          </div>
          <div className="px-4 py-3 space-y-2.5">
            <p className="text-[11px] text-gray-500 leading-snug">
              We show a <span className="font-semibold text-gray-700">modelled rating</span> when:
            </p>
            <ul className="text-[11px] text-gray-500 leading-snug space-y-1 pl-3">
              <li className="flex items-start gap-1.5"><span className="mt-0.5 shrink-0 text-gray-400">•</span>The lodged EPC is <span className="font-semibold text-gray-700 ml-1">expired or invalid</span></li>
              <li className="flex items-start gap-1.5"><span className="mt-0.5 shrink-0 text-gray-400">•</span>You have told us the property differs from the last survey</li>
            </ul>
          </div>
          <div className="px-4 py-2.5 bg-gray-50 border-t border-gray-100">
            <p className="text-[11px] text-gray-400 leading-snug">
              This rating may differ from the <span className="font-semibold text-gray-600">lodged EPC</span> because we re-model under{" "}
              <span className="font-semibold text-gray-600">SAP 10</span>.
            </p>
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}
