import Avatar from '@design-system/Avatar';
import { useTheme } from '@mui/material';

import { type FileIconProps } from './types';
import { fileToIconV2 } from './utils';

export const FileIcon = ({ file, ...rest }: FileIconProps) => {
  const theme = useTheme();
  const { Icon, color, colorsSX } = fileToIconV2(file, theme);

  return (
    <Avatar
      size="medium"
      color={color}
      Icon={Icon}
      {...rest}
      sx={{ ...colorsSX, ...rest?.sx }}
    />
  );
};

export default FileIcon;
