"use client";

import React from "react";
import { PrintOrientation } from "@/lib/printUtils";

interface PrintOrientationToggleProps {
  orientation?: PrintOrientation;
  value?: PrintOrientation;
  onChange: (orientation: PrintOrientation) => void;
  className?: string;
}

export const PrintOrientationToggle: React.FC<PrintOrientationToggleProps> = ({
  orientation,
  value,
  onChange,
  className = "",
}) => {
  const active = orientation || value || "portrait";

  return (
    <div
      className={`inline-flex items-center gap-1 bg-slate-100 p-1 rounded-xl border border-slate-200 text-xs font-semibold print:hidden ${className}`}
    >
      <button
        type="button"
        onClick={() => onChange("portrait")}
        className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg transition-all cursor-pointer ${
          active === "portrait"
            ? "bg-white text-blue-700 shadow-xs font-bold border border-slate-200/80"
            : "text-slate-600 hover:text-slate-900"
        }`}
        title="Orientasi Kertas F4 Tegak (Portrait: 215mm x 330mm)"
      >
        <span className="w-2.5 h-3.5 border-2 border-current rounded-[2px] inline-block shrink-0" />
        <span>Portrait (Tegak)</span>
      </button>
      <button
        type="button"
        onClick={() => onChange("landscape")}
        className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg transition-all cursor-pointer ${
          active === "landscape"
            ? "bg-white text-blue-700 shadow-xs font-bold border border-slate-200/80"
            : "text-slate-600 hover:text-slate-900"
        }`}
        title="Orientasi Kertas F4 Mendatar (Landscape: 330mm x 215mm)"
      >
        <span className="w-3.5 h-2.5 border-2 border-current rounded-[2px] inline-block shrink-0" />
        <span>Landscape (Mendatar)</span>
      </button>
    </div>
  );
};