import React from 'react';
import { Card, Container, Row, Col } from 'react-bootstrap';

const projects = [
  {
    title: 'Project One',
    description: 'This is a brief description of project one.',
    imageUrl: 'https://via.placeholder.com/150',
    link: 'https://github.com/yourusername/project-one'
  },
  {
    title: 'Project Two',
    description: 'This is a brief description of project two.',
    imageUrl: 'https://via.placeholder.com/150',
    link: 'https://github.com/yourusername/project-two'
  },
  {
    title: 'Project Three',
    description: 'This is a brief description of project three.',
    imageUrl: 'https://via.placeholder.com/150',
    link: 'https://github.com/yourusername/project-three'
  }
];

const Projects = () => {
  const handleCardClick = (link) => {
    window.open(link, '_blank');
  };

  return (
    <section className="projects-section" id="projects">
      <Container>
        <Row>
          {projects.map((project, index) => (
            <Col key={index} sm={12} md={6} lg={4}>
              <Card className="mb-4" onClick={() => handleCardClick(project.link)}>
                <Card.Img variant="top" src={project.imageUrl} />
                <Card.Body>
                  <Card.Title>{project.title}</Card.Title>
                  <Card.Text>{project.description}</Card.Text>
                </Card.Body>
              </Card>
            </Col>
          ))}
        </Row>
      </Container>
    </section>
  );
};

export default Projects;
