import { Link } from "react-router-dom";
import { Settings } from "lucide-react";

/**
 * 카테고리 선택 컴포넌트
 */
function CategorySelector({ categories, selectedId, onChange }) {
  // 색상 스타일 (기본 색상 또는 커스텀 HEX)
  const getColorStyle = (color) => {
    const colorMap = {
      blue: "bg-blue-500",
      green: "bg-green-500",
      purple: "bg-purple-500",
      red: "bg-red-500",
      pink: "bg-pink-500",
      yellow: "bg-yellow-500",
      orange: "bg-orange-500",
      gray: "bg-gray-500",
      cyan: "bg-cyan-500",
      indigo: "bg-indigo-500",
    };

    if (!color) return { className: "bg-gray-500" };
    if (color.startsWith("#")) {
      return { style: { backgroundColor: color } };
    }
    return { className: colorMap[color] || "bg-gray-500" };
  };

  return (
    <div className="bg-white rounded-2xl shadow-sm p-8">
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-lg font-bold text-gray-900">카테고리 선택</h2>
        <Link
          to="/admin/schedule/categories"
          className="flex items-center gap-1 text-xs text-gray-400 hover:text-primary transition-colors"
        >
          <Settings size={12} />
          카테고리 관리
        </Link>
      </div>

      <div className="grid grid-cols-4 gap-3">
        {categories.map((category) => {
          const colorStyle = getColorStyle(category.color);
          const isSelected = selectedId === category.id;

          return (
            <button
              key={category.id}
              type="button"
              onClick={() => onChange(category.id)}
              className={`flex items-center justify-center gap-2 px-4 py-4 rounded-xl border-2 transition-all ${
                isSelected
                  ? "border-primary bg-primary/5 shadow-sm"
                  : "border-gray-200 hover:border-gray-300 hover:bg-gray-50"
              }`}
            >
              <span
                className={`w-3 h-3 rounded-full ${colorStyle.className || ""}`}
                style={colorStyle.style}
              />
              <span
                className={`text-sm font-medium ${
                  isSelected ? "text-primary" : "text-gray-700"
                }`}
              >
                {category.name}
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

export default CategorySelector;
