import { Button, Card, Divider, Radio, RadioChangeEvent, Space } from "antd";
import ProText from "components/ProText";
import styles from "./CarRatioGroups.module.css";
import { useTranslation } from "react-i18next";
import CarIcon from "components/Icons/CarIcon";

interface CarRatioGroupsProps {
  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 CarRatioGroups = ({
  options,
  onRatioClick,
  onChange,
  value,
  optionsStyle,
  valueStyle,
  showDivider = false,
  ...props
}: CarRatioGroupsProps) => {
  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%", gap: 16 }}>
            {options.map((option) => (
              <>
                <Radio
                  key={option.value}
                  value={option.value}
                  className={styles.circleCheckbox}
                >
                  <div
                    style={{
                      display: "flex",
                      flexDirection: "row",
                      justifyContent: "space-between",
                    }}
                  >
                    <div
                      style={{ display: "flex", flexDirection: "row", gap: 12 }}
                    >
                      <div
                        style={{
                          display: "flex",
                          flexDirection: "column",
                          gap: 4,
                          width: "100%",
                          justifyContent: "center",
                          textAlign: "left",
                        }}
                      >
                        <ProText
                          style={{
                            fontWeight: 500,
                            fontStyle: "Medium",
                            fontSize: 12,
                            lineHeight: "140%",
                            color: "#333333",
                          }}
                        >
                          Optima
                        </ProText>

                        <ProText
                          style={{
                            fontWeight: 400,
                            fontStyle: "Regular",
                            fontSize: 12,
                            lineHeight: "140%",
                            color: "#777580",
                          }}
                        >
                          42322, blue
                        </ProText>
                      </div>
                    </div>

                    <Button
                      shape="circle"
                      icon={<CarIcon />}
                      style={{
                        backgroundColor: "var(--background)",
                        border: "none",
                        width: 32,
                        height: 32,
                        minWidth: 32,
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.1)",
                      }}
                    />
                  </div>
                </Radio>
                {showDivider && options.length !== options.length - 1 && (
                  <Divider style={{ margin: "0 0 16px 0 " }} />
                )}
              </>
            ))}
          </Space>
        </Radio.Group>
      </div>
  );
};

export default CarRatioGroups;