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

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

  return (
    <Wrapper id={sectionId} styling={styling} className='space-y-4'>
      {projects.map((project, index) => (
        <div
          key={project.id}
          className={cn(
            'relative group',
            'before:absolute before:inset-0 before:-z-10',
            'before:opacity-5 before:rounded-3xl',
            'before:transform before:scale-x-[1.02] before:scale-y-[1.15]',
            'hover:before:opacity-10 before:transition-opacity',
            project.status === PortfolioProjectStatus.PENDING ? 'opacity-85' : 'opacity-100'
          )}
        >
          {project.status === PortfolioProjectStatus.PENDING && (
            <div className='absolute top-4 right-4 bg-neutral-800 text-white px-3 py-1 rounded-full text-sm font-medium z-10 builder'>
              Pending
            </div>
          )}
          <div
            className={cn(
              'flex flex-col lg:flex-row gap-4 py-2',
              index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'
            )}
          >
            <div className='lg:w-5/12 relative rounded-xl overflow-hidden shadow-lg'>
              <Image
                src={project.image}
                alt={project.title}
                width={400}
                
                loading='lazy'
                height={280}
                className={cn(
                  'w-full h-full object-cover aspect-video transform group-hover:scale-105 transition-transform duration-500'
                )}
              />
              {project.url && (
                <a
                  href={project.url}
                  target='_blank'
                  rel='noopener noreferrer'
                  className='absolute top-2 right-2 p-2 bg-white/90 rounded-full 
                    shadow-lg backdrop-blur-sm opacity-0 group-hover:opacity-100 
                    transition-opacity duration-300 hover:bg-white'
                >
                  <FaExternalLinkAlt style={{ color: color }} />
                </a>
              )}
              {project.gitUrl && (
                <a
                  href={project.gitUrl}
                  target='_blank'
                  rel='noopener noreferrer'
                  className='absolute top-2 right-12 p-2 bg-white/90 rounded-full 
                    shadow-lg backdrop-blur-sm opacity-0 group-hover:opacity-100 
                    transition-opacity duration-300 hover:bg-white'
                >
                  <FaCodeBranch style={{ color: color }} />
                </a>
              )}
            </div>

            <div
              className={cn(
                'lg:w-7/12 flex flex-col justify-center space-y-1',
                index % 2 === 0 ? 'text-left' : 'text-right'
              )}
            >
              <h1
                className='text-[length:calc(var(--text-font-size-base)*1.2)] font-bold builder'
                style={{ color: color }}
              >
                {project.title}
              </h1>

              <p
                className={cn(
                  'text-[length:calc(var(--text-font-size-base)*0.8)] leading-relaxed builder line-clamp-3'
                )}
              >
                {project.description}
              </p>

              <div className={cn('flex flex-wrap gap-2 pt-2', index % 2 === 0 ? 'justify-start' : 'justify-end')}>
                {project.technologies.map((technology) => (
                  <div
                    key={technology}
                    className={cn(
                      'flex items-center gap-2 p-2 rounded-md relative',
                      'transform hover:scale-105 transition-all duration-200',
                      'bg-gradient-to-r from-[var(--color-text)]/10 to-[var(--color-text)]/5',
                      'hover:from-[var(--color-text)]/20 hover:to-[var(--color-text)]/10',
                      'backdrop-blur-sm border border-[var(--color-text)]/10',
                      'shadow-sm hover:shadow-md'
                    )}
                    style={{
                      color: color,
                    }}
                  >
                    <div className='relative z-10 flex items-center gap-2'>
                      {TechIcons[technology]}
                      <span className='text-[length:calc(var(--text-font-size-base)*0.8)] font-medium'>
                        {technology}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      ))}
      {projects.length === 0 && <EmptyProjectsSection />}
    </Wrapper>
  );
}
