import { ISpell } from '@rpg-engine/shared';
import React from 'react';
import styled from 'styled-components';
import { SpellInfo } from './SpellInfo';

export interface ISpellInfoDisplayProps {
  spell: ISpell;
  isMobile?: boolean;
}

export const SpellInfoDisplay: React.FC<ISpellInfoDisplayProps> = ({
  spell,
  isMobile,
}) => {
  return (
    <Flex $isMobile={isMobile}>
      <SpellInfo spell={spell} />
    </Flex>
  );
};

const Flex = styled.div<{ $isMobile?: boolean }>`
  display: flex;
  gap: 0.5rem;
  flex-direction: ${({ $isMobile }) => ($isMobile ? 'row-reverse' : 'row')};

  @media (max-width: 580px) {
    flex-direction: column-reverse;
    align-items: center;
  }
`;
