import { Avatar, Stack, Typography, SxProps } from '@mui/material';

type Props = {
  logo: string;
  name: string;
  sx?: SxProps;
  size?: number;
};

export default function Currency({ logo, name, sx = {}, size = 20 }: Props) {
  return (
    <Stack
      direction="row"
      spacing={0.5}
      sx={[
        {
          alignItems: 'center',
        },
        {
          alignItems: 'center',
        },
        ...(Array.isArray(sx) ? sx : [sx]),
      ]}>
      <Avatar src={logo} alt={name} sx={{ width: size, height: size }} />
      <Typography
        className="currency-name"
        sx={{
          color: 'text.primary',
        }}>
        {name}
      </Typography>
    </Stack>
  );
}
