import { Typography } from "@mui/material";
import PropTypes from "prop-types";
import React from "react";
import { SelectPicker } from "../../Common";
import { CardWrapper } from "./styles";

const SelectPickerCard = ({
  valueGroups,
  optionGroups,
  onChange,
  color,
  width = "100%",
  title = "",
  size = "medium",
  ...others
}) => {
  return (
    <CardWrapper color={color} width={width} size="medium" {...others}>
      <Typography variant="h6">{title}</Typography>
      <SelectPicker
        optionGroups={optionGroups}
        valueGroups={valueGroups}
        onChange={onChange}
        color={color}
        size={size}
      />
    </CardWrapper>
  );
};

SelectPickerCard.propTypes = {
  optionGroups: PropTypes.object.isRequired,
  valueGroups: PropTypes.object.isRequired,
  onChange: PropTypes.func,
  color: PropTypes.string,
  width: PropTypes.string,
  title: PropTypes.string,
  size: PropTypes.oneOfType(["small", "medium"]),
};

export default SelectPickerCard;