/**
 * 分组字段设计器组件（占位符）
 * TODO: 待实现完整的分组字段设计功能
 */

'use client';

import React from 'react';
import { useTranslation } from '@/hooks/useTranslation';
import type { DesignField } from './types';

interface GroupFieldDesignerProps {
  field: DesignField;
  isSelected?: boolean;
  onClick?: () => void;
  onChange?: (updates: any) => void;
  onSelect?: () => void;
  onChildHover?: React.Dispatch<React.SetStateAction<boolean>>;
}

/**
 * 分组字段设计器
 * 用于设计表单中的分组/折叠面板字段
 */
export function GroupFieldDesigner({ field, isSelected, onClick }: GroupFieldDesignerProps) {
  const { t } = useTranslation();
  return (
    <div
      className={`
        p-4 border rounded-lg bg-gray-50
        ${isSelected ? 'ring-2 ring-blue-500 border-blue-500' : 'border-gray-200'}
        ${onClick ? 'cursor-pointer hover:border-blue-300' : ''}
      `}
      onClick={onClick}
    >
      <div className="flex items-center gap-2 mb-2">
        <span className="text-sm font-medium text-gray-700">
          📁 {field.label || t.forms.designer.group.placeholder}
        </span>
      </div>
      <div className="text-xs text-gray-500 ml-5">
        {t.forms.designer.group.developing}
      </div>
    </div>
  );
}