import styled from '@emotion/styled';

import Button, { ButtonShape, ButtonVariant } from '@/components/button/Button';

import CreateCard from './CreateCard';

const ButtonWrapper = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background-color: var(--color-background-secondary);
`;

export const StudioStemModeCard = ({
  mode,
  setMode,
}: {
  mode: 'off' | 'instrument' | 'vocal';
  setMode: (mode: 'off' | 'instrument' | 'vocal') => void;
}) => {
  return (
    <>
      <CreateCard>
        <ButtonWrapper>
          <Button
            variant={
              mode === 'off' ? ButtonVariant.Primary : ButtonVariant.Tertiary
            }
            onClick={() => setMode('off')}
            aria-label='Switch to legacy mode'
            shape={ButtonShape.Rectangle}
          >
            Legacy
          </Button>
          <Button
            variant={
              mode === 'instrument'
                ? ButtonVariant.Primary
                : ButtonVariant.Tertiary
            }
            onClick={() => setMode('instrument')}
            aria-label='Switch to instrument mode'
            shape={ButtonShape.Rectangle}
          >
            Instrument
          </Button>
          <Button
            variant={
              mode === 'vocal' ? ButtonVariant.Primary : ButtonVariant.Tertiary
            }
            onClick={() => setMode('vocal')}
            aria-label='Switch to vocal mode'
            shape={ButtonShape.Rectangle}
          >
            Vocal
          </Button>
        </ButtonWrapper>
      </CreateCard>
    </>
  );
};