"use client";

import React from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

interface ImageWidgetConfigPanelProps {
  config: any;
  onConfigChange: (config: any) => void;
}

/**
 * 이미지 위젯 설정 패널
 */
export function ImageWidgetConfigPanel({ config, onConfigChange }: ImageWidgetConfigPanelProps) {
  const handleChange = (key: string, value: any) => {
    onConfigChange({
      ...config,
      [key]: value,
    });
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-sm">이미지 설정</CardTitle>
        <CardDescription className="text-xs">이미지 업로드 및 표시 설정</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="maxSize" className="text-xs">
            최대 파일 크기 (MB)
          </Label>
          <Input
            id="maxSize"
            type="number"
            min="1"
            max="10"
            value={(config.maxSize || 5 * 1024 * 1024) / (1024 * 1024)}
            onChange={(e) => handleChange("maxSize", parseInt(e.target.value) * 1024 * 1024)}
            className="h-8 text-xs"
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor="placeholder" className="text-xs">
            플레이스홀더 텍스트
          </Label>
          <Input
            id="placeholder"
            type="text"
            value={config.placeholder || "이미지를 업로드하세요"}
            onChange={(e) => handleChange("placeholder", e.target.value)}
            className="h-8 text-xs"
          />
        </div>

        <div className="rounded-md bg-muted p-3 text-xs text-muted-foreground">
          <p className="mb-1 font-medium">지원 형식:</p>
          <p>JPG, PNG, GIF, WebP</p>
        </div>
      </CardContent>
    </Card>
  );
}

export default ImageWidgetConfigPanel;