"use client";

import { useTranslation } from "@/i18n";

interface PiPButtonProps {
  isActive: boolean;
  onClick: () => void;
}

/* Picture-in-Picture SVG icon — small rect inside large rect */
function PiPIcon({ active }: { active: boolean }) {
  return (
    <svg
      width="18"
      height="18"
      viewBox="0 0 24 24"
      fill="none"
      stroke={active ? "var(--accent)" : "#fff"}
      strokeWidth="1.8"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {/* outer rect */}
      <rect x="2" y="4" width="20" height="16" rx="2" />
      {/* inner floating rect */}
      <rect
        x="12"
        y="12"
        width="8"
        height="6"
        rx="1"
        fill={active ? "var(--accent)" : "#fff"}
        stroke="none"
        fillOpacity={active ? 0.9 : 0.25}
      />
    </svg>
  );
}

export function PiPButton({ isActive, onClick }: PiPButtonProps) {
  const { t } = useTranslation();
  return (
    <button
      onClick={(e) => {
        e.stopPropagation();
        onClick();
      }}
      aria-label={isActive ? t("player_exitPipFull") : t("player_enterPip")}
      title={isActive ? t("player_exitPip") : t("player_pip")}
      className="flex items-center justify-center rounded-lg transition-all duration-150 active:scale-90 hover:scale-105"
      style={{
        width: 34,
        height: 34,
        background: isActive
          ? "rgba(var(--accent-rgb),0.18)"
          : "rgba(0,0,0,0.55)",
        backdropFilter: "blur(8px)",
        border: isActive
          ? "1px solid rgba(var(--accent-rgb),0.45)"
          : "1px solid rgba(255,255,255,0.12)",
        boxShadow: isActive
          ? "0 0 12px rgba(var(--accent-rgb),0.3)"
          : "0 2px 8px rgba(0,0,0,0.4)",
      }}
    >
      <PiPIcon active={isActive} />
    </button>
  );
}