"use client"
import React from 'react';
import { Card, CardContent, CardMedia, Typography } from '@mui/material';
import Header from '../../components/common/header';
import SideNavigation from '../../components/common/side_navigation_bar';
import styles from '../../styles/panel/dashboard.module.css';

const Dashboard = () => {
  const handleClick = (buttonName) => {
    console.log(`Clicked on ${buttonName}`);
    // Handle your button click event here
  };

  const cardsData = [
    {
      id: 1,
      imageSrc: 'https://example.com/image1.jpg',
      title: 'Onderzoek 1',
      estimatedTime: '60 minuten',
      timeLeft: '3 dagen',
      description: 'Dit is een onderzoek',
    },
    {
      id: 2,
      imageSrc: 'https://example.com/image2.jpg',
      title: 'Onderzoek 2',
      estimatedTime: '60 minuten',
      timeLeft: '3 dagen',
      description: 'Dit is een ander onderzoek',
    },
    // Add more card data as needed
  ];

  return (
    <div className={styles.container}>
      <SideNavigation handleClick={handleClick} />
      <div className={styles.main}>
        <Header />
        <div className={styles.mainContent}>
          {cardsData.map((card) => (
            <Card key={card.id} className={styles.card}>
              <CardMedia
                component="img"
                height="140"
                image={card.imageSrc}
                alt={card.title}
              />
              <CardContent>
                <Typography variant="h6">{card.title}</Typography>
                <Typography>{`Estimated Time: ${card.estimatedTime}`}</Typography>
                <Typography>{`Time Left: ${card.timeLeft}`}</Typography>
                <Typography>{card.description}</Typography>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Dashboard;