import React from "react";
import styled from "styled-components";
import { Link } from 'react-router-dom';
import jd from "../data/jobdescription";

const JobCardContainer = styled.div`
  align-self: center;
  width: 100%;
  max-width: 320px;
  margin: 10px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  background-color: #2d3748;
  cursor: pointer;
  border: 3px solid #3f7ad3;

  box-sizing: border-box;

  @media (min-width: 768px) {
    margin: 10px;
  }

  @media (min-width: 1024px) {
    margin: 10px;
  }
`;

const JobImageContainer = styled.div`
  position: relative;
`;

const JobImage = styled.img`
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center;
  border-bottom: 1px solid #e0e0e0;
`;

const JobOverlay = styled.div`
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  text-align: center;
  font-size: 0.9rem;
`;

const JobContent = styled.div`
  padding: 15px;
  text-align: left;
  flex-grow: 1;
`;

const JobTitle = styled.h3`
  font-size: 1.2rem;
  color: #e2e8f0;
  font-weight: 600;
  margin-bottom: 10px;
`;

const JobStatus = styled.div`
  font-size: 1rem;
  color: #3f7ad3;
  margin-bottom: 10px;
`;

const JobExcerpt = styled.p`
  font-size: 1rem;
  color: #e2e8f0;
  margin-bottom: 20px;
  line-height: 1.5;
`;

const ApplyButton = styled(Link)`
  font-size: 1rem;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  padding: 10px 20px;
  margin-top: 10px;
  border-radius: 25px;
  background-color: #3267B9;
  transition: all 0.3s ease-in-out;

  &:hover {
    text-decoration: none;
    box-shadow: 0 0 10px rgba(63, 122, 211, 0.8);
    transform: translateY(-3px);
  }
`;

const JobCard = ({ job }) => {
  const jobStatus = job.status || "Open"; // Default to Open if no status
  const vacancyCount = job.vacancies || "N/A"; // Default to N/A if no vacancies provided
  const jobType = job.jobType || "Hybrid"; // Default to Hybrid if no type provided
  const schedule = job.employmentType || "Full-time"; // Default to Full-time if no schedule is provided

  return (
    <JobCardContainer data-testid='job-card'>
      <JobImageContainer>
        <JobImage src={job.imageUrl} alt={job.title} />
        <JobOverlay>
          {jobType} | {schedule}
        </JobOverlay>
      </JobImageContainer>
      <JobContent>
        <JobTitle>{job.title}</JobTitle>
        <JobStatus><span>Status: {jobStatus} </span>| <span> Vacancies: {vacancyCount}</span></JobStatus>
        <JobExcerpt>{job.description}</JobExcerpt>
        
        {/* Pass job as state to the route */}
        <ApplyButton to={`/job/${job.id}`} state={{ jobdescription: jd.find(j => j.id === job.id) }}>
          Read & Apply →
        </ApplyButton>
      </JobContent>
    </JobCardContainer>
  );
};

export default JobCard;