"use client";

import { useTranslations } from "next-intl";

import { PALETTE_NAMES } from "@/lib/studio-color-palettes";
import { contrastTextColor } from "@/lib/studio-color-palettes";

interface ColorsTemplatePreviewCardProps {
  palette: string[];    // full 5-color palette
  paletteIndex: number;
}

export function ColorsTemplatePreviewCard({
  palette,
  paletteIndex,
}: ColorsTemplatePreviewCardProps) {
  const t = useTranslations(
    "auto.componentsStudioSidebarColorsTemplatePreviewCard"
  );
  const [mainColor, accentColor] = palette;
  const paletteName =
    PALETTE_NAMES[paletteIndex] ??
    t("paletteFallback", { number: paletteIndex + 1 });

  return (
    <div
      className="shrink-0 overflow-hidden rounded-lg"
      style={{ background: mainColor }}
    >
      {/* Mini canvas preview */}
      <div className="relative flex h-[88px] items-center justify-end pr-4">
        {/* Background fill already comes from parent div */}

        {/* Simulated text placeholders — left side */}
        <div className="absolute left-4 top-1/2 -translate-y-1/2 space-y-1.5">
          <div
            className="h-3 w-20 rounded-sm text-[9px] font-bold leading-3 px-1 flex items-center"
            style={{
              backgroundColor: `${contrastTextColor(mainColor)}22`,
              color: contrastTextColor(mainColor),
            }}
          >
            {t("mainColor")}
          </div>
          <div
            className="h-2.5 w-16 rounded-sm text-[8px] leading-none px-1 flex items-center"
            style={{
              backgroundColor: `${contrastTextColor(mainColor)}11`,
              color: `${contrastTextColor(mainColor)}cc`,
            }}
          >
            {t("additional")}
          </div>
          <div
            className="h-2 w-14 rounded-sm"
            style={{ backgroundColor: accentColor ?? mainColor }}
          />
        </div>

        {/* 5-swatch strip — right side */}
        <div className="flex h-7 w-[90px] overflow-hidden rounded">
          {palette.map((color, i) => (
            <span
              key={i}
              className="flex-1"
              style={{ backgroundColor: color }}
              aria-hidden
            />
          ))}
        </div>
      </div>

      {/* Palette name footer */}
      <div
        className="px-3 py-1.5 text-[10px] font-semibold"
        style={{ color: contrastTextColor(mainColor) }}
      >
        {paletteName}
      </div>
    </div>
  );
}
