import React from "react";
import { RadioButton, RadioSize } from "./RadioButton";
import clsx from "clsx";
import { inputWidths } from "../../data/getItemsWidth";
import Typography from "../Typography/Typography";

interface RadioOption {
  value?: string | any;
  label?: string;
  disabled?: boolean;
}

interface RadioGroupProps {
  name?: string;
  groupTitle?: string;
  options?: RadioOption[];
  value?: string | any;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  disabled?: boolean;
  isError?: boolean;
  size?: RadioSize;
  direction?: "row" | "column";
  className?: string;
}

export const RadioGroup: React.FC<RadioGroupProps> = ({
  name = "",
  groupTitle = "",
  options = [],
  value = "",
  onChange,
  disabled = false,
  isError = false,
  size = "medium",
  direction = "column",
  className,
}) => {
  return (
    <div
      className={clsx(
        "flex ",
        direction === "column"
          ? "flex-col space-y-2 items-start"
          : "flex-row space-x-4 items-center",
        inputWidths,
        className
      )}
    >
      {groupTitle && (
        <Typography
          color="text-gray-700 dark:text-primary-100"
          variant="body2"
          className="text-nowrap "
        >
          {groupTitle}
        </Typography>
      )}
      {options.map((option) => (
        <RadioButton
          key={option.value ?? ""}
          name={name}
          value={option.value ?? ""}
          label={option.label ?? ""}
          checked={value === option.value}
          onChange={onChange}
          disabled={option.disabled || disabled}
          isError={isError}
          size={size}
        />
      ))}
    </div>
  );
};
