import {
  Card,
  Radio,
  Row,
  Col,
  Typography,
  Space,
  FC,
  CreditCardOutlined,
  AliPayOutlined,
  WechatOutlined,
} from '@/imports';

interface PaymentFormProps {
  paymentMethod: string;
  onPaymentMethodChange: (method: string) => void;
}

const PaymentForm: FC<PaymentFormProps> = ({
  paymentMethod,
  onPaymentMethodChange,
}) => {
  return (
    <Card title="选择支付方式">
      <Radio.Group
        value={paymentMethod}
        onChange={(e) => onPaymentMethodChange(e.target.value)}
        style={{ width: '100%' }}
      >
        <Card
          hoverable
          style={{
            marginBottom: '16px',
            borderColor: paymentMethod === 'creditCard' ? '#1890ff' : undefined,
            borderWidth: paymentMethod === 'creditCard' ? 2 : 1,
            cursor: 'pointer'
          }}
          onClick={() => onPaymentMethodChange('creditCard')}
        >
          <Row align="middle">
            <Col span={4}>
              <CreditCardOutlined style={{ fontSize: '24px', color: '#1890ff' }} />
            </Col>
            <Col span={16}>
              <Typography.Text strong>信用卡</Typography.Text>
              <Typography.Paragraph type="secondary">支持Visa、Mastercard、American Express等</Typography.Paragraph>
            </Col>
            <Col span={4}>
              <Radio value="creditCard" />
            </Col>
          </Row>
        </Card>
        <Card
          hoverable
          style={{
            marginBottom: '16px',
            borderColor: paymentMethod === 'alipay' ? '#1890ff' : undefined,
            borderWidth: paymentMethod === 'alipay' ? 2 : 1,
            cursor: 'pointer'
          }}
          onClick={() => onPaymentMethodChange('alipay')}
        >
          <Row align="middle">
            <Col span={4}>
              <AliPayOutlined style={{ fontSize: '24px', color: '#1890ff' }} />
            </Col>
            <Col span={16}>
              <Typography.Text strong>支付宝</Typography.Text>
              <Typography.Paragraph type="secondary">使用支付宝扫码支付</Typography.Paragraph>
            </Col>
            <Col span={4}>
              <Radio value="alipay" />
            </Col>
          </Row>
        </Card>
        <Card
          hoverable
          style={{
            borderColor: paymentMethod === 'wechat' ? '#1890ff' : undefined,
            borderWidth: paymentMethod === 'wechat' ? 2 : 1,
            cursor: 'pointer'
          }}
          onClick={() => onPaymentMethodChange('wechat')}
        >
          <Row align="middle">
            <Col span={4}>
              <WechatOutlined style={{ fontSize: '24px', color: '#1890ff' }} />
            </Col>
            <Col span={16}>
              <Typography.Text strong>微信支付</Typography.Text>
              <Typography.Paragraph type="secondary">使用微信扫码支付</Typography.Paragraph>
            </Col>
            <Col span={4}>
              <Radio value="wechat" />
            </Col>
          </Row>
        </Card>
      </Radio.Group>
    </Card>
  );
};

export default PaymentForm;