import Image from 'next/image';

import { Project } from '@/types';

import styles from '@/styles/ProjectCard.module.css';

interface ProjectCardProps {
  project: Project;
}

const ProjectCard = ({ project }: ProjectCardProps) => {
  return (
    <a
      href={project.link}
      target="_blank"
      rel="noopener noreferrer"
      className={styles.card}
    >
      <div className={styles.content}>
        <div className={styles.logoWrapper}>
          <Image
            src={project.logo}
            alt={`${project.title} logo`}
            width={24}
            height={24}
            className={styles.logo}
          />
        </div>
        <p className={styles.type}>{project.type}</p>
        <h3 className={styles.title}>{project.title}</h3>
        <p className={styles.description}>{project.description}</p>
       
        
      </div>
      <div className={styles.footer}>
        <p className={styles.date}>{project.date}</p>
        <p className={styles.status} data-status={project.status.toLowerCase()}>
  {project.status}
</p>
      {/*   <p className={styles.skills}>{project.skills}</p> */}
       
      </div>
      </a>
  );
};

// Add hover effect to the card
// Add a gradient overlay on hover
    

export default ProjectCard;