"use client";

import Link from "next/link";
import { Briefcase, MapPin, Clock, ArrowRight } from "lucide-react";

interface Props {
  id: string;
  title: string;
  department: string;
  location: string;
  type: string;
}

export default function JobCard({ id, title, department, location, type }: Props) {
  return (
    <Link href={`/careers/${id}`}>
      <div className="group mt-2 relative p-6 border border-slate-200 rounded-lg hover:shadow-xl hover:shadow-[#428B4D]/10 hover:border-[#428B4D]/30 transition-all duration-300 cursor-pointer bg-white/95 backdrop-blur-sm">
        {/* Gradient accent */}
        <div className="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-[#428B4D] via-[#428B4D]/80 to-[#428B4D]/60 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        
        <div className="flex items-start justify-between gap-4">
          <div className="flex-1">
            <h3 className="text-xl font-bold text-slate-900 mb-3 group-hover:text-[#428B4D] transition-colors duration-200">
              {title}
            </h3>

            <div className="flex flex-wrap gap-4 text-slate-600 text-sm">
              <span className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-50 border border-slate-200">
                <Briefcase size={14} className="text-[#428B4D]" />
                {department}
              </span>
              <span className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-50 border border-slate-200">
                <MapPin size={14} className="text-[#428B4D]" />
                {location}
              </span>
              <span className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-50 border border-slate-200">
                <Clock size={14} className="text-[#428B4D]" />
                {type}
              </span>
            </div>
          </div>
          
          <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-[#428B4D]/10 group-hover:bg-[#428B4D] transition-all duration-300">
            <ArrowRight className="h-5 w-5 text-[#428B4D] group-hover:text-white transition-colors duration-300" />
          </div>
        </div>
      </div>
    </Link>
  );
}