import Title from '@design-system/Title';
import { type SxProps } from '@mui/material';

import { type FileInfoProps } from './types';
import { getFileInfo } from './utils';

const FileInfo = ({ sx, file, slotProps = {} }: FileInfoProps) => {
  const { name, size, extension } = getFileInfo(file);

  const description = `${size} • ${extension}`;

  return (
    <Title
      variant="S"
      title={name}
      description={description}
      withEllipsis
      overflow="tooltip"
      {...slotProps.root}
      sx={
        {
          ...sx,
          ...slotProps.root?.sx,
        } as SxProps
      }
    />
  );
};

export default FileInfo;
