import { __, sprintf } from "@wordpress/i18n";
import Tooltip, {
  type TooltipAnimation,
} from "../../frontend/components/Tooltip";

type TooltipAnimationPreviewGridProps = {
  options: readonly { value: TooltipAnimation; label: string }[];
  fadeInEnabled: boolean;
  fadeOutEnabled: boolean;
  adminColor: string;
};

/** Uses the storefront tooltip so the examples share its motion and focus behavior. */
export function TooltipAnimationPreviewGrid({
  options,
  fadeInEnabled,
  fadeOutEnabled,
  adminColor,
}: TooltipAnimationPreviewGridProps) {
  return (
    <div className="bwvs:bg-gray-50 bwvs:legacy-border bwvs:border-gray-200 bwvs:rounded-lg bwvs:p-6">
      <h3 className="bwvs:text-sm bwvs:font-semibold bwvs:mb-4">
        {__("Tooltip Animation Previews", "b3-swatches")}
      </h3>
      <div className="b3-wvs-preview-grid">
        {options.map(({ value, label }) => (
          <div
            key={value}
            className="bwvs:flex bwvs:flex-col bwvs:items-center bwvs:gap-2"
          >
            <Tooltip
              text={__("Preview", "b3-swatches")}
              animation={value}
              fadeInEnabled={fadeInEnabled}
              fadeOutEnabled={fadeOutEnabled}
            >
              <button
                type="button"
                aria-label={sprintf(
                  __("Preview %s tooltip animation", "b3-swatches"),
                  label,
                )}
                className="bwvs:w-12 bwvs:h-12 bwvs:legacy-border bwvs:rounded-md bwvs:text-white bwvs:focus-visible:outline-hidden bwvs:focus-visible:ring-2 bwvs:focus-visible:ring-offset-2"
                style={
                  {
                    backgroundColor: adminColor,
                    borderColor: adminColor,
                  } as React.CSSProperties
                }
              >
                <span className="bwvs:pointer-events-none">Aa</span>
              </button>
            </Tooltip>
            <span className="bwvs:text-xs bwvs:font-medium">{label}</span>
          </div>
        ))}
      </div>
      <p className="bwvs:mt-4 bwvs:text-xs bwvs:text-gray-500">
        {__(
          "Focus or hover over a box to preview its tooltip animation.",
          "b3-swatches",
        )}
      </p>
    </div>
  );
}