import React from 'react';
import 'mana-font';
import { ManaSymbolProps } from './types';

export const ManaSymbol: React.FC<ManaSymbolProps> = ({
  symbol,
  size,
  shadow = false,
  fixed = false,
  cost = false,
  half = false,
  className = '',
  style,
}) => {
  const classes = [
    'ms',
    `ms-${symbol.toLowerCase()}`,
    size && `ms-${size}`,
    shadow && 'ms-shadow',
    fixed && 'ms-fw',
    cost && 'ms-cost',
    half && 'ms-half',
    className,
  ]
    .filter(Boolean)
    .join(' ');

  return <i className={classes} style={style} />;
};