Checkmate/client/src/Components/inputs/Switch.tsx

import { forwardRef } from "react";
import Switch from "@mui/material/Switch";
import type { SwitchProps } from "@mui/material/Switch";
import { useTheme } from "@mui/material/styles";

interface SwitchComponentProps extends SwitchProps {
	dualOption?: boolean;
}

export const SwitchComponent = forwardRef<HTMLInputElement, SwitchComponentProps>(
	function SwitchComponent({ sx, dualOption = false, ...props }, ref) {
		const theme = useTheme();
		const additionalSx = Array.isArray(sx) ? sx : sx ? [sx] : [];

		return (
			<Switch
				{...props}
				slotProps={{
					input: {
						ref: ref,
					},
				}}
				sx={[
					{
						"& .MuiSwitch-switchBase": {
							"&.Mui-checked": {
								color: "#E0E0E0",
								"& + .MuiSwitch-track": {
									backgroundColor: theme.palette.primary.main,
									opacity: 1,
									border: 0,
								},
							},
						},
						...(dualOption && {
							"& .MuiSwitch-track": {
								backgroundColor: theme.palette.primary.main,
								opacity: 1,
							},
						}),
					},
					...additionalSx,
				]}
			/>
		);
	}
);