import { useState } from 'react';

import ButtonGroup from '@design-system/ButtonGroup';
import CardContainer from '@design-system/CardContainer';
import Title from '@design-system/Title';
import Stack from '@mui/material/Stack';

import { type ContentSwitcherProps } from './types';

const ContentSwitcher = ({ title, options }: ContentSwitcherProps) => {
  const labels = options.map(option => option.label);
  const [selectedOption, setSelectedOption] = useState<number>(0);

  const currentTitle =
    typeof title === 'function' ? title(options[selectedOption]) : title;

  return (
    <CardContainer
      padding={24}
      fullWidth
    >
      <Stack sx={{ gap: 2 }}>
        <Stack
          sx={{
            flexDirection: 'row',
            gap: 2,
            alignItems: 'center',
            justifyContent: 'space-between',
          }}
        >
          <Title title={currentTitle} />
          <ButtonGroup
            labels={labels}
            value={selectedOption}
            onChange={nextValue => {
              if (nextValue !== null) {
                setSelectedOption(nextValue);
              }
            }}
            fixedCheck
          />
        </Stack>
        {options[selectedOption].content}
      </Stack>
    </CardContainer>
  );
};

export default ContentSwitcher;
