import { useResourceFileStore } from '@kevisual/resources/pages/store/resource-file';
import { Box, Typography } from '@mui/material';
import prettyBytes from 'pretty-bytes';
import dayjs from 'dayjs';

type ContentShowType = {
  size: number;
  lastModified: string;
  etag: string;
  name?: string;
};
export const ContentForm = () => {
  const { resource } = useResourceFileStore();
  const contentShow = resource as ContentShowType;
  return (
    <Box className='p-4 border rounded-md mt-2'>
      {/* <Typography variant='h6'>{contentShow?.name || 'No Name Available'}</Typography> */}
      <Typography variant='body1'>
        <strong>Size:</strong> {contentShow?.size ? prettyBytes(contentShow?.size) : 'N/A'}
      </Typography>
      <Typography variant='body1'>
        <strong>Last Modified:</strong> {contentShow?.lastModified ? dayjs(contentShow?.lastModified).format('YYYY-MM-DD HH:mm:ss') : 'N/A'}
      </Typography>
      <Typography variant='body1'>
        <strong>ETag:</strong> {contentShow?.etag || 'N/A'}
      </Typography>
    </Box>
  );
};
