"use client";

import React from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

export interface RatingTypeConfig {
  maxRating?: number;
  allowHalf?: boolean;
  size?: "sm" | "md" | "lg";
  showLabel?: boolean;
}

interface RatingTypeConfigPanelProps {
  config: RatingTypeConfig;
  onConfigChange: (config: RatingTypeConfig) => void;
}

export const RatingTypeConfigPanel: React.FC<RatingTypeConfigPanelProps> = ({ config, onConfigChange }) => {
  const handleMaxRatingChange = (value: string) => {
    const maxRating = parseInt(value) || 5;
    onConfigChange({ ...config, maxRating });
  };

  const handleAllowHalfChange = (allowHalf: boolean) => {
    onConfigChange({ ...config, allowHalf });
  };

  const handleSizeChange = (size: "sm" | "md" | "lg") => {
    onConfigChange({ ...config, size });
  };

  const handleShowLabelChange = (showLabel: boolean) => {
    onConfigChange({ ...config, showLabel });
  };

  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="maxRating">최대 별점</Label>
        <Input
          id="maxRating"
          type="number"
          min="1"
          max="10"
          value={config.maxRating || 5}
          onChange={(e) => handleMaxRatingChange(e.target.value)}
          placeholder="5"
        />
      </div>

      <div className="flex items-center justify-between">
        <Label htmlFor="allowHalf">반점 허용</Label>
        <Switch id="allowHalf" checked={config.allowHalf || false} onCheckedChange={handleAllowHalfChange} />
      </div>

      <div className="space-y-2">
        <Label htmlFor="size">크기</Label>
        <Select value={config.size || "md"} onValueChange={handleSizeChange}>
          <SelectTrigger>
            <SelectValue placeholder="크기 선택" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="sm">작게</SelectItem>
            <SelectItem value="md">보통</SelectItem>
            <SelectItem value="lg">크게</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="flex items-center justify-between">
        <Label htmlFor="showLabel">점수 표시</Label>
        <Switch id="showLabel" checked={config.showLabel ?? true} onCheckedChange={handleShowLabelChange} />
      </div>
    </div>
  );
};

RatingTypeConfigPanel.displayName = "RatingTypeConfigPanel";
