// src/components/VideoApp/VideoCategoryCard.tsx
import React from 'react';
import {
  Card,
  CardContent,
  CardMedia,
  Typography,
  Button,
  LinearProgress,
  Box,
} from '@mui/material';
import { VideoCategory } from 'types';

interface VideoCategoryCardProps {
  category: VideoCategory;
  onSelectCategory: (categoryId: string) => void; // Now uses categoryId
}

const VideoCategoryCard: React.FC<VideoCategoryCardProps> = ({ category, onSelectCategory }) => {
  return (
    <Card sx={{ maxWidth: 345, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <CardMedia component="img" height="140" image={category.imageUrl} alt={category.name} />
      <CardContent sx={{ flexGrow: 1 }}>
        <Typography gutterBottom variant="h5" component="div">
          {category.name}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {category.description}
        </Typography>
        <Box sx={{ width: '100%', mt: 2 }}>
          <Typography
            variant="body2"
            color="text.secondary"
          >{`${category.completedVideos}/${category.totalVideos} videos completed`}</Typography>
          <LinearProgress
            variant="determinate"
            value={category.categoryProgress}
            sx={{ height: 8, borderRadius: 5, mt: 1 }}
          />
          <Typography
            variant="caption"
            display="block"
            align="right"
          >{`${category.categoryProgress.toFixed(0)}%`}</Typography>
        </Box>
      </CardContent>
      <Box sx={{ p: 2, pt: 0 }}>
        <Button size="small" onClick={() => onSelectCategory(category.id)}>
          View Videos
        </Button>
      </Box>
    </Card>
  );
};

export default VideoCategoryCard;
