import { Type } from 'components'; import { CATEGORY_COLOR, TYPE_COLOR } from 'constants/colors'; import type { TMove } from 'constants/types'; import styles from './Move.module.scss'; interface MoveProps { moveDetail: TMove; showStatus: boolean; } function Move({ moveDetail, showStatus }: MoveProps): JSX.Element { return ( <div className={styles.move} style={{ backgroundColor: `${TYPE_COLOR[moveDetail.type]}90` }}> <Type hideName type={moveDetail.type} /> <span>{moveDetail.name}</span> {showStatus && ( <img alt="move status" src={CATEGORY_COLOR[moveDetail.category]} title={moveDetail.category} /> )} </div> ); } export default Move;