import { Divider, 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;
  optionsStyle?: React.CSSProperties;
  valueStyle?: React.CSSProperties;
  showDivider?: boolean;
}

const ProRatioGroups = ({
  options,
  onRatioClick,
  onChange,
  value,
  optionsStyle,
  valueStyle,
  showDivider = false,
  ...props
}: ProRatioGroupsProps) => {
  const handleChange = (e: RadioChangeEvent) => {
    console.log(e.target.value);
    // 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",
                    placeItems: "center",
                  }}
                >
                  <ProText
                    style={{
                      fontSize: "1rem",
                      ...optionsStyle,
                    }}
                  >
                    {option.label}
                  </ProText>
                  <ProText style={{ fontSize: "1rem", ...valueStyle }}>
                    {option?.price}
                  </ProText>
                </div>
              </Radio>
              {showDivider && options.length !== options.length - 1 && (
                <Divider style={{ margin: "0 0 16px 0 " }} />
              )}
            </>
          ))}
        </Space>
      </Radio.Group>
    </div>
  );
};

export default ProRatioGroups;