import { Checkbox, Space } from "antd";
import ProText from "components/ProText";

interface ProCheckboxGroupsProps {
  options: any[];
  value?: string[];
  onChange?: (values: string[]) => void;
}

const ProCheckboxGroups = ({ options, ...props }: ProCheckboxGroupsProps) => {
  return (
    <Checkbox.Group
      {...props}
      style={{
        width: "100%",
      }}
    >
      <Space direction="vertical" style={{ width: "100%" }}>
        {options.map((option: any) => (
          <>
            <Checkbox
              key={option.value}
              value={option.value}
              // style={{ width: 24, height: 24, borderRadius: 30 }}
            >
              <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>
            </Checkbox>
            {/* {index !== options.length - 1 && <Divider style={{ margin: 0 }} />} */}
          </>
        ))}
      </Space>
    </Checkbox.Group>
  );
};

export default ProCheckboxGroups;
