1import { Box, Typography } from '@mui/material';
2import type { StateInfo } from '../types';
4interface StateBoxProps {
5 state: StateInfo;
6 size: number;
7 isLastInGroup?: boolean;
8 onHover?: (stateIndex: number) => void;
9 onLeave?: () => void;
10}
12export default function StateBox({ state, size, isLastInGroup = false, onHover, onLeave }: StateBoxProps) {
13 const boxHeight = Math.floor(size * 0.6); // Height is 60% of width
15 return (
16 <Box
17 onMouseEnter={() => onHover?.(state.index)}
18 onMouseLeave={() => onLeave?.()}
19 sx={{
20 width: size,
21 height: boxHeight,
22 backgroundColor: state.symbol.color,
23 display: 'flex',
24 flexDirection: 'column',
25 alignItems: 'center',
26 justifyContent: 'center',
27 border: '1px solid rgba(0, 0, 0, 0.1)',
28 cursor: 'pointer',
29 marginRight: isLastInGroup ? '6px' : 0,
30 '&:hover': {
31 boxShadow: '0 0 0 2px rgba(0, 0, 0, 0.3)',
32 zIndex: 1,
33 },
34 }}
35 >
36 <Typography
37 variant="caption"
38 sx={{
39 color: 'white',
40 fontWeight: 'bold',
41 fontSize: size > 20 ? '0.75rem' : '0.65rem',
42 textShadow: '0 1px 2px rgba(0, 0, 0, 0.5)',
43 }}
44 >
45 {state.symbol.name}
46 </Typography>
47 </Box>
48 );
49}