import React from "react";

import { Box, FormControlLabel, Switch, Typography } from "@mui/material";

import { useI18n } from "../../../contexts/I18nContext";

export interface ExchangeSwitchProps {
  checked: boolean;
  onChange: () => void;
  disabled?: boolean;
}

const ExchangeSwitch: React.FC<ExchangeSwitchProps> = ({ checked, onChange, disabled }) => {
  const { t } = useI18n();

  return (
    <Box position="absolute" right={16} top={16}>
      <FormControlLabel
        checked={checked}
        control={<Switch color="primary" size="small" />}
        disabled={disabled}
        label={
          <Typography color="textSecondary" variant="caption">
            {t("Exchange")}
          </Typography>
        }
        labelPlacement="end"
        sx={{ margin: 0, gap: 0.5 }}
        onChange={() => onChange()}
      />
    </Box>
  );
};

export default ExchangeSwitch;