import { useResourceStore } from '@/pages/store/resource';
import { Card, CardContent, Typography } from '@mui/material';
import { getIcon } from '../FileIcon';

export const FileCard = () => {
  const { list, prefix } = useResourceStore();
  return (
    <>
      {list.map((resource) => (
        <Card key={resource.etag} style={{ margin: '10px' }}>
          <CardContent>
            <Typography
              variant='h5'
              component='div'
              // className='flex items-center gap-2'
            >
              {getIcon(resource.name)}
              {resource.name ? resource.name.replace(prefix, '') : resource.prefix?.replace(prefix, '')}
            </Typography>
            {resource.lastModified && <Typography color='text.secondary'>Last Modified: {resource.lastModified}</Typography>}
            {resource.size > 0 && <Typography color='text.secondary'>Size: {resource.size} bytes</Typography>}
          </CardContent>
        </Card>
      ))}
    </>
  );
};