import Wrapper from '@/components/common/Wrapper';
import { TechIcons } from '@/components/icons/TechIcons';
import { cn } from '@/lib/utils';
import { ProjectCardsProps } from '@/types/project';
import { PortfolioProjectStatus } from '@prisma/client';
import Image from 'next/image';
import { FaExternalLinkAlt, FaCodeBranch } from 'react-icons/fa';
import { getColor } from '@/src/utils/color';
import { EmptyProjectsSection } from './EmptyProjectsSection';

export function HorizontalProjects({ projects = [], styling, sectionId }: ProjectCardsProps) {
  const color = getColor(styling);

  return (
    <Wrapper id={sectionId} styling={styling} className='space-y-4 px-4'>
      {projects.map((project) => (
        <div
          key={project.id}
          className={cn(
            'flex flex-col md:flex-row gap-4 rounded-xl shadow-md overflow-hidden',
            'hover:shadow-lg transition-shadow duration-300 relative',
            project.status === PortfolioProjectStatus.PENDING ? 'opacity-85' : 'opacity-100'
          )}
        >
          {project.status === PortfolioProjectStatus.PENDING && (
            <div className='absolute top-2 right-2 bg-neutral-800 text-white px-2 py-0.5 rounded-full text-xs font-medium builder'>
              Pending
            </div>
          )}
          <div className='relative group flex-shrink-0 w-full md:w-[500px]'>
            <Image
              src={project.image}
              alt={project.title}
              width={400}
              loading='lazy'
              
              height={180}
              className={cn('w-full h-full object-cover aspect-video')}
              style={{ objectFit: 'cover' }}
            />
            <div
              className='absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 
              transition-opacity flex items-center justify-center gap-3'
            >
              {project.url && (
                <a
                  href={project.url}
                  target='_blank'
                  rel='noopener noreferrer'
                  className='hover:text-[var(--hover-color)] transition-colors'
                  style={{ '--hover-color': color } as React.CSSProperties}
                >
                  <FaExternalLinkAlt size={20} />
                </a>
              )}
              {project.gitUrl && (
                <a
                  href={project.gitUrl}
                  target='_blank'
                  rel='noopener noreferrer'
                  className='hover:text-[var(--hover-color)] transition-colors'
                  style={{ '--hover-color': color } as React.CSSProperties}
                >
                  <FaCodeBranch size={20} />
                </a>
              )}
            </div>
          </div>
          <div className='p-4 md:w-2/3 flex flex-col justify-center'>
            <h1
              className='text-[length:calc(var(--text-font-size-base)*1.1)] font-bold mb-2 builder'
              style={{ color: color }}
            >
              {project.title}
            </h1>
            <p className={cn('mb-3 text-[length:calc(var(--text-font-size-base)*0.8)] line-clamp-3')}>
              {project.description}
            </p>
            <div className='flex flex-wrap gap-2' style={{ justifyContent: styling?.align }}>
              {project.technologies.map((technology) => (
                <div key={technology} className={cn('p-1.5 rounded-md bg-neutral-200')} style={{ color: color }}>
                  {TechIcons[technology]}
                </div>
              ))}
            </div>
          </div>
        </div>
      ))}
      {projects.length === 0 && <EmptyProjectsSection />}
    </Wrapper>
  );
}
