"use client";

import { tooltipDict } from "@/components/tooltip/dict";
import { Tooltip } from "@/components/tooltip/tooltip";

type InfoTooltipProps = {
  content: string;
  label?: string;
  className?: string;
};

function InfoIcon() {
  return (
    <svg
      aria-hidden="true"
      className="size-4"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={1.75}
    >
      <circle cx="12" cy="12" r="9" />
      <path d="M12 10v6" />
      <path d="M12 7h.01" />
    </svg>
  );
}

export function InfoTooltip({
  content,
  label = tooltipDict.infoLabel,
  className = "",
}: InfoTooltipProps) {
  return (
    <Tooltip content={content} className={className}>
      <button
        type="button"
        aria-label={label}
        className="inline-flex size-6 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
      >
        <InfoIcon />
      </button>
    </Tooltip>
  );
}

export type { InfoTooltipProps };