import { Radio, RadioChangeEvent, Space } from "antd";
import ProText from "components/ProText";
import styles from "./ProRatioGroups.module.css";

interface ProRatioGroupsProps {
  options: { label: string; value: string; price?: string }[];
  onRatioClick?: (value: string) => void;
  onChange?: (e: RadioChangeEvent) => void;
  value?: string;
}

const ProRatioGroups = ({
  options,
  onRatioClick,
  onChange,
  value,
  ...props
}: ProRatioGroupsProps) => {
  const handleChange = (e: RadioChangeEvent) => {
    // If onChange is provided (from Form.Item), use it
    if (onChange) {
      onChange(e);
    }
    // Also call onRatioClick if provided (for backward compatibility)
    if (onRatioClick) {
      onRatioClick(e.target.value);
    }
  };

  return (
    <div className={styles.proRatioGroups}>
      <Radio.Group
        style={{
          width: "100%",
        }}
        value={value}
        onChange={handleChange}
        {...props}
      >
        <Space orientation="vertical" style={{ width: "100%" }}>
          {options.map((option) => (
            <Radio
              key={option.value}
              value={option.value}
              className={styles.circleCheckbox}
            >
              <div
                style={{
                  display: "flex",
                  flexDirection: "row",
                  justifyContent: "space-between",
                  width: "100%",
                  padding: "8px 0",
                }}
              >
                <ProText
                  style={{
                    fontSize: "1rem",
                  }}
                >
                  {option.label}
                </ProText>
                <ProText style={{ fontSize: "1rem" }}>{option?.price}</ProText>
              </div>
            </Radio>
          ))}
        </Space>
      </Radio.Group>
    </div>
  );
};

export default ProRatioGroups;