"use client";

import React from "react";

/* ------------------------------------------------------------------ */
/* Types                                                               */
/* ------------------------------------------------------------------ */

export interface PackageUnit {
  label: string;
  icon: string;
  value: string;
}

const PACKAGE_UNITS: PackageUnit[] = [
  { label: "박스", icon: "\uD83D\uDCE6", value: "박스" },
  { label: "포대", icon: "\uD83D\uDECD\uFE0F", value: "포대" },
  { label: "팩",   icon: "\uD83D\uDCCB", value: "팩" },
  { label: "묶음", icon: "\uD83D\uDD17", value: "묶음" },
  { label: "롤",   icon: "\uD83E\uDDFB", value: "롤" },
  { label: "통",   icon: "\uD83E\uDEB3", value: "통" },
];

interface PackagingModalProps {
  open: boolean;
  onClose: () => void;
  onSelect: (unit: PackageUnit) => void;
}

/* ------------------------------------------------------------------ */
/* Component                                                           */
/* ------------------------------------------------------------------ */

export function PackagingModal({ open, onClose, onSelect }: PackagingModalProps) {
  if (!open) return null;

  return (
    <div className="fixed inset-0 z-[60] flex items-center justify-center">
      {/* Overlay */}
      <div className="absolute inset-0 bg-black/50" onClick={onClose} />

      {/* Panel */}
      <div className="relative bg-white w-[90%] max-w-[360px] rounded-2xl shadow-2xl z-10 overflow-hidden">
        {/* Header */}
        <div className="flex items-center justify-between px-5 py-4 border-b border-gray-100">
          <h3 className="text-lg font-bold text-gray-900">
            <span className="mr-1.5">{"\uD83D\uDCE6"}</span>
            포장 단위 선택
          </h3>
          <button
            onClick={onClose}
            className="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 transition-colors"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        {/* Body: 3x2 grid */}
        <div className="p-5">
          <div className="grid grid-cols-3 gap-3">
            {PACKAGE_UNITS.map((unit) => (
              <button
                key={unit.value}
                onClick={() => {
                  onSelect(unit);
                  onClose();
                }}
                className="flex flex-col items-center gap-2 py-4 px-3 border-2 border-gray-200 rounded-xl bg-white text-sm font-medium text-gray-700 hover:border-blue-400 hover:bg-blue-50 active:scale-95 transition-all min-h-[80px]"
              >
                <span className="text-2xl">{unit.icon}</span>
                <span>{unit.label}</span>
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}