import { Tabs, Text } from "@mantine/core";
import type { CSSProperties } from "react";

type BooleanToggleProps = {
  label?: string;
  value: boolean;
  defaultValue?: boolean;
  onChange: (value: boolean) => void;

  wrapperStyle?: CSSProperties;
  listStyle?: CSSProperties;
  tabStyle?: CSSProperties;
  onLabel?: string;
  offLabel?: string;
};

const BooleanToggle: React.FC<BooleanToggleProps> = ({
  label,
  value,
  onChange,
  wrapperStyle,
  listStyle,
  tabStyle,
  onLabel = "True",
  offLabel = "False",
}) => {
  return (
    <div style={wrapperStyle}>
      {label && (
        <Text size="sm" fw={500} mb={6}>
          {label}
        </Text>
      )}

      <Tabs
        value={value ? "true" : "false"}
        onChange={(val) => onChange(val === "true")}
        variant="pills"
      >
        <Tabs.List
          style={{
            backgroundColor: "#e8f0fe",
            padding: 3,
            borderRadius: 5,
            width: "fit-content",
            ...listStyle,
          }}
        >
          <Tabs.Tab
            value="true"
            style={{
              padding: "8px 14px",
              ...tabStyle,
            }}
          >
            {onLabel}
          </Tabs.Tab>

          <Tabs.Tab
            value="false"
            style={{
              padding: "8px 14px",
              ...tabStyle,
            }}
          >
            {offLabel}
          </Tabs.Tab>
        </Tabs.List>
      </Tabs>
    </div>
  );
};

export default BooleanToggle;