import FileIcon from '@composed-components/files/FileIcon';
import FileInfo from '@composed-components/files/FileInfo';
import MenuList from '@composed-components/MenuList';
import CardContainer from '@design-system/CardContainer';
import { type SxProps } from '@mui/material';
import { getFileExtension } from '@utils/files';

import { type FileItemProps } from './types';

const FileItem = ({
  sx,
  file,
  actions,
  startContent,
  slotProps = {},
}: FileItemProps) => {
  const iconFile = {
    extension: getFileExtension(file?.name || ''),
  };

  return (
    <CardContainer
      {...slotProps.root}
      sx={
        {
          '& .MuiCardContent-root': {
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            gap: 1,
          },
          ...sx,
          ...slotProps.root?.sx,
        } as SxProps
      }
    >
      {startContent}
      <FileIcon
        file={iconFile}
        {...slotProps.icon}
      />
      <FileInfo
        file={file}
        {...slotProps.info}
        sx={
          {
            flex: 1,
            ...slotProps.info?.sx,
          } as SxProps
        }
      />
      {actions && (
        <MenuList
          options={actions}
          {...slotProps.menu}
        />
      )}
    </CardContainer>
  );
};

export default FileItem;
