"use client";

import { RectangleHorizontal, RectangleVertical } from "lucide-react";

export type AspectRatioValue =
  | "VIDEO_ASPECT_RATIO_LANDSCAPE"
  | "VIDEO_ASPECT_RATIO_PORTRAIT";

interface AspectRatioSelectorProps {
  /** Current selected aspect ratio value */
  value: AspectRatioValue;
  /** Change handler when an option is selected */
  onChange: (value: AspectRatioValue) => void;
  /** Optional className to customize the trigger button */
  className?: string;
  /** Optional dropdown placement, defaults to top */
  placement?: "top" | "bottom" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
  /** data-alt tag for analytics/testing */
  dataAlt?: string;
}

/**
 * Aspect ratio selector using Antd Radio.Group with two options: landscape and portrait.
 * Uses icons as button content and triggers onChange when selection changes.
 * @param {AspectRatioValue} value - current selected value
 * @param {(v: AspectRatioValue) => void} onChange - change handler
 * @param {string} [className] - optional className for wrapper
 * @param {string} [placement] - kept for backward compatibility (unused)
 * @param {string} [dataAlt] - data-alt attribute for the wrapper
 * @returns {JSX.Element}
 */
export const AspectRatioSelector = ({
  value,
  onChange,
  className,
  placement = "top",
  dataAlt = "config-aspect-ratio",
}: AspectRatioSelectorProps) => {
  return (
    <div
      data-alt={dataAlt}
      role="radiogroup"
      aria-label="aspect-ratio"
      className={`inline-flex p-1 items-center rounded-[8px] bg-white/20 ${className || ""}`}
    >
      <button
        type="button"
        role="radio"
        aria-checked={value === "VIDEO_ASPECT_RATIO_LANDSCAPE"}
        onClick={() => onChange("VIDEO_ASPECT_RATIO_LANDSCAPE")}
        className="outline-none rounded-[8px]"
      >
        <div
          className={`flex items-center justify-center px-1 py-0.5 ${
            value === "VIDEO_ASPECT_RATIO_LANDSCAPE"
              ? "bg-white/60 text-black rounded-[4px]"
              : "bg-transparent text-white"
          }`}
        >
          <RectangleHorizontal className="w-4 h-4" />
        </div>
      </button>
      <button
        type="button"
        role="radio"
        aria-checked={value === "VIDEO_ASPECT_RATIO_PORTRAIT"}
        onClick={() => onChange("VIDEO_ASPECT_RATIO_PORTRAIT")}
        className="outline-none"
      >
        <div
          className={`flex items-center justify-center px-1 py-0.5 ${
            value === "VIDEO_ASPECT_RATIO_PORTRAIT"
              ? "bg-white/60 text-black rounded-[4px]"
              : "bg-transparent text-white"
          }`}
        >
          <RectangleVertical className="w-4 h-4" />
        </div>
      </button>
    </div>
  );
};

export default AspectRatioSelector;