import React from "react";
import { RadioContainer, RadioStyle } from "./Radio.styled";
import { gray } from "../../core/colors/colors";

export type RadioProps = {
  checked?: boolean;
  radioInfo: { name: string; value: string };
  children: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onClick: (e: React.MouseEvent<HTMLInputElement>) => void;
  disable?: boolean;
  color?: string;
  backgroundColor?: string;
};

const Radio = ({
  checked,
  radioInfo,
  children,
  onChange,
  onClick,
  disable = false,
  color = "",
  backgroundColor = "",
}: RadioProps) => {
  return (
    <RadioContainer>
      <RadioStyle
        type="radio"
        name={radioInfo.name}
        value={radioInfo.value}
        onChange={(e) => onChange(e)}
        onClick={(e) => onClick(e)}
        checked={checked}
        disabled={disable}
        style={{
          boxShadow: color !== "" ? `0 0 0 1px ${color}` : "", // 테두리
          borderColor: backgroundColor, // 배경
          backgroundColor: color, // 체크 했을 때 원
        }}
      />
      <span style={{ color: disable ? gray[400] : "" }}>{children}</span>
    </RadioContainer>
  );
};

export default Radio;
