import {
  Card,
  Row,
  Col,
  Select,
  Typography,
  Space,
  FC,
  CpuOutlined,
  ServerOutlined,
  DatabaseOutlined,
  DownloadOutlined,
} from '@/imports';
import { InstanceConfig as InstanceConfigType } from '@/services/instanceDataSource';

interface InstanceConfigProps {
  config: InstanceConfigType;
  onConfigChange: (key: keyof InstanceConfigType, value: number) => void;
  configOptions: {
    cpuOptions: number[];
    memoryOptions: number[];
    storageOptions: number[];
    bandwidthOptions: number[];
  };
}

const InstanceConfig: FC<InstanceConfigProps> = ({
  config,
  onConfigChange,
  configOptions,
}) => {
  return (
    <Card title="配置实例">
      <Row gutter={[16, 16]}>
        <Col xs={24} sm={12} md={6}>
          <Card size="small" title={<Space><CpuOutlined /> CPU核心数</Space>}>
            <Select
              style={{ width: '100%' }}
              value={config.cpu}
              onChange={(value) => onConfigChange('cpu', value)}
              options={configOptions.cpuOptions.map(option => ({
                value: option,
                label: `${option} 核`
              }))}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card size="small" title={<Space><ServerOutlined /> 内存</Space>}>
            <Select
              style={{ width: '100%' }}
              value={config.memory}
              onChange={(value) => onConfigChange('memory', value)}
              options={configOptions.memoryOptions.map(option => ({
                value: option,
                label: `${option} GB`
              }))}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card size="small" title={<Space><DatabaseOutlined /> 存储</Space>}>
            <Select
              style={{ width: '100%' }}
              value={config.storage}
              onChange={(value) => onConfigChange('storage', value)}
              options={configOptions.storageOptions.map(option => ({
                value: option,
                label: `${option} GB`
              }))}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card size="small" title={<Space><DownloadOutlined /> 带宽</Space>}>
            <Select
              style={{ width: '100%' }}
              value={config.bandwidth}
              onChange={(value) => onConfigChange('bandwidth', value)}
              options={configOptions.bandwidthOptions.map(option => ({
                value: option,
                label: `${option} Mbps`
              }))}
            />
          </Card>
        </Col>
      </Row>
    </Card>
  );
};

export default InstanceConfig;