import React from 'react';
import { FaMapMarkerAlt, FaUserAlt, FaComments, FaClock, FaBriefcase } from 'react-icons/fa';
import Heading from '../atoms/Heading';
import Paragraph from '../atoms/Paragraph';
import Button from '../atoms/Button';
import { useRouter } from 'next/navigation';
import { ArrowRight, Calendar, Users, Target } from 'lucide-react';

export const JobOpportunitiesfirst = ({ id, image, title, workType, location, experience, skills }) => {
  const skillsArray = Array.isArray(skills) ? skills : (skills ? skills.split(',') : []);
  const router = useRouter();
  
  const handleClick = () => {
    if (id) router.push(`/jobs/job-detail/${id}`);
  };

  const getWorkTypeColor = (type) => {
    const typeLower = type.toLowerCase();
    if (typeLower.includes('remote')) return '#10b981';
    if (typeLower.includes('onsite')) return '#f59e0b';
    if (typeLower.includes('full')) return '#3b82f6';
    if (typeLower.includes('part')) return '#8b5cf6';
    return '#6b7280';
  };

  return (
    <div 
      className="group relative w-full bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 cursor-pointer transform hover:-translate-y-2"
      onClick={handleClick}
    >
      {/* Image with Gradient Overlay */}
      <div className="relative h-48 overflow-hidden">
        <img 
          src={image} 
          alt={title}
          className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
        />
        {/* Gradient Overlay */}
        <div 
          className="absolute inset-0 opacity-90"
          style={{
            background: 'linear-gradient(135deg, #0B6F78, #0a306b)'
          }}
        ></div>
        
        {/* Work Type Badges */}
        <div className="absolute top-4 left-4 flex flex-wrap gap-2">
          {workType.map((type, index) => (
            <span 
              key={index}
              className="text-xs font-semibold text-white px-3 py-1 rounded-full backdrop-blur-sm border border-white/20"
              style={{ 
                backgroundColor: `${getWorkTypeColor(type)}40`,
                borderColor: getWorkTypeColor(type)
              }}
            >
              {type}
            </span>
          ))}
        </div>

        {/* Experience Badge */}
        {experience && (
          <div className="absolute top-4 right-4 bg-white/20 backdrop-blur-sm text-white text-xs font-semibold px-3 py-1 rounded-full border border-white/30">
            {experience}
          </div>
        )}
      </div>

      {/* Content Card */}
      <div className="relative p-6">
        {/* Title */}
        <Heading level={4}>
          <div 
            className="mb-4 line-clamp-2 group-hover:text-transparent bg-clip-text transition-all duration-300"
            style={{
              background: 'linear-gradient(135deg, #0B6F78, #0a306b)'
            }}
          >
            {title}
          </div>
        </Heading>

        {/* Details Grid */}
        <div className="grid grid-cols-1 gap-3 mb-4">
          {/* Location */}
          <div className="flex items-center gap-3 text-gray-600">
            <div 
              className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0"
              style={{
                background: 'linear-gradient(135deg, #0B6F7810, #0a306b20)'
              }}
            >
              <FaMapMarkerAlt className="text-sm" style={{ color: '#0B6F78' }} />
            </div>
            <span className="text-sm font-medium">{location || 'Location not specified'}</span>
          </div>

          {/* Experience */}
          {experience && (
            <div className="flex items-center gap-3 text-gray-600">
              <div 
                className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0"
                style={{
                  background: 'linear-gradient(135deg, #0B6F7810, #0a306b20)'
                }}
              >
                <FaUserAlt className="text-sm" style={{ color: '#0B6F78' }} />
              </div>
              <span className="text-sm font-medium">{experience}</span>
            </div>
          )}

          {/* Skills Preview */}
          {skillsArray.length > 0 && (
            <div className="flex items-start gap-3 text-gray-600">
              <div 
                className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 mt-1"
                style={{
                  background: 'linear-gradient(135deg, #0B6F7810, #0a306b20)'
                }}
              >
                <Target className="w-4 h-4" style={{ color: '#0B6F78' }} />
              </div>
              <div className="flex-1">
                <span className="text-sm font-medium mb-1 block">Key Skills:</span>
                <div className="flex flex-wrap gap-1">
                  {skillsArray.slice(0, 3).map((skill, index) => (
                    <span 
                      key={index}
                      className="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded-full"
                    >
                      {skill.trim()}
                    </span>
                  ))}
                  {skillsArray.length > 3 && (
                    <span className="text-xs text-gray-500 px-2 py-1">
                      +{skillsArray.length - 3} more
                    </span>
                  )}
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Divider */}
        <div 
          className="w-full h-px mb-4 opacity-30"
          style={{
            background: 'linear-gradient(90deg, #0B6F78, #0a306b)'
          }}
        ></div>

        {/* CTA Button */}
        <div className="flex justify-center">
          <button 
            className="group relative overflow-hidden w-full bg-transparent border-2 font-semibold py-3 px-6 rounded-xl transition-all duration-300 flex items-center justify-center"
            style={{
              borderColor: '#0B6F78',
              color: '#0B6F78'
            }}
            onMouseEnter={(e) => {
              e.target.style.background = 'linear-gradient(135deg, #0B6F78, #0a306b)';
              e.target.style.color = 'white';
            }}
            onMouseLeave={(e) => {
              e.target.style.background = 'transparent';
              e.target.style.color = '#0B6F78';
            }}
          >
            <span className="relative z-10 flex items-center gap-2">
              View Job Details
              <ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
            </span>
            
            {/* Animated background */}
            <div 
              className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
              style={{
                background: 'linear-gradient(135deg, #0B6F78, #0a306b)'
              }}
            ></div>
          </button>
        </div>
      </div>

      {/* Hover Effect Border */}
      <div 
        className="absolute inset-0 rounded-3xl border-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"
        style={{
          borderColor: '#0B6F78',
          background: 'linear-gradient(135deg, #0B6F7808, #0a306b08)'
        }}
      ></div>
    </div>
  );
};