// src/components/VideoApp/VideoListItem.tsx
import React from 'react';
import { ListItem, ListItemText, Typography, LinearProgress, Box } from '@mui/material';
import { VideoItem } from 'types';



interface VideoListItemProps {
  video: VideoItem;
  isSelected: boolean;
  onSelect: (videoId: string) => void;
}

const VideoListItem: React.FC<VideoListItemProps> = ({ video, isSelected, onSelect }) => {
  
  const percentage: number = Math.round(video.progress/video.duration*100)
  return (
    <ListItem
      button
      selected={isSelected}
      onClick={() => {
        console.log('selecting new video')
        onSelect(video.id)
      }}
      sx={{ borderBottom: '1px solid #eee' }}
    >
      <ListItemText
        primary={video.name}
        secondary={
          <Box>
            <Typography variant="body2" color="text.secondary">
              {video.description}
            </Typography>
            <LinearProgress variant="determinate" value={percentage} sx={{ height: 5, borderRadius: 5, mt: 0.5 }} />
            <Typography variant="caption" display="block" align="right">
              {`${percentage.toFixed(0)}% ${video.status === 'completed' ? '(Completed)' : ''}`}
            </Typography>
          </Box>
        }
      />
    </ListItem>
  );
};

export default VideoListItem;