import React from 'react';
import { Button, Typography } from 'antd';
import {
  MenuOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  DeleteOutlined
} from '@ant-design/icons';

const { Text } = Typography;

interface ModuleProps {
  config: any;
  isSelected: boolean;
  onSelect: () => void;
  onDelete: () => void;
  onMoveUp?: () => void;
  onMoveDown?: () => void;
  canMoveUp?: boolean;
  canMoveDown?: boolean;
}

const DealerInfoModule: React.FC<ModuleProps> = ({
  config,
  isSelected,
  onSelect,
  onDelete,
  onMoveUp,
  onMoveDown,
  canMoveUp,
  canMoveDown,
}) => {
  return (
    <div
      className={`border border-gray-300 rounded p-2 mb-2 bg-white transition-all duration-200 ${
        isSelected ? 'border-2 border-blue-500 shadow-[0_0_0_2px_rgba(24,144,255,0.2)]' : 'hover:border-blue-300'
      }`}
      onClick={onSelect}
    >
      <div className="flex justify-between items-center mb-2 pb-2 border-b border-gray-100">
        <Text strong>经销商信息模块</Text>
        <div className="flex gap-1">
          <Button
            type="text"
            icon={<MenuOutlined />}
            size="small"
            style={{ cursor: 'move' }}
          />
          <Button
            type="text"
            icon={<ArrowUpOutlined />}
            onClick={(e) => {
              e.stopPropagation();
              if (onMoveUp) onMoveUp();
            }}
            size="small"
            disabled={!canMoveUp}
          />
          <Button
            type="text"
            icon={<ArrowDownOutlined />}
            onClick={(e) => {
              e.stopPropagation();
              if (onMoveDown) onMoveDown();
            }}
            size="small"
            disabled={!canMoveDown}
          />
          <Button
            type="text"
            icon={<DeleteOutlined />}
            onClick={(e) => {
              e.stopPropagation();
              onDelete();
            }}
            danger
            size="small"
          />
        </div>
      </div>
			<div className="py-2 text-center flex flex-col gap-2.5">
        <div className="flex justify-around w-[70%] font-bold text-lg leading-8 border-b border-black py-0 px-2.5 my-0 mx-auto">
          {config.showDealerName && (
            <span className="px-2.5 min-w-[80px] text-center inline-block">{config.dealerName}</span>
          )}
          {config.showWatermelonGrade && (
            <span className="px-2.5 min-w-[80px] text-center inline-block">{config.watermelonGrade}</span>
          )}
          {config.showDestination && (
            <span className="px-2.5 min-w-[80px] text-center inline-block">{config.destination}</span>
          )}
          {config.showVehicleNumber && (
            <span className="px-2.5 min-w-[80px] text-center inline-block">{config.vehicleNumber}</span>
          )}
        </div>
      </div>
    </div>
  );
};

export default DealerInfoModule;