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 ModernProjectCards({ projects = [], styling, sectionId }: ProjectCardsProps) {
  const color = getColor(styling);

  return (
    <Wrapper id={sectionId} styling={styling}>
      <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
        {projects.map((project, index) => (
          <div
            key={project.id}
            className={cn(
              'group p-4 rounded-xl shadow-lg relative my-4',
              'transition-all duration-300 ease-in-out lg:hover:scale-105',
              'lg:hover:rotate-0 lg:hover:translate-y-0',
              index % 2 === 0 ? 'lg:rotate-[-2deg] lg:translate-y-2' : 'lg:rotate-[2deg] lg:-translate-y-2',
              project.status === PortfolioProjectStatus.PENDING ? 'opacity-85' : 'opacity-100'
            )}
            style={{
              backgroundColor: color,
            }}
          >
            {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='overflow-hidden rounded-lg mb-4'>
              <Image
                src={project.image}
                alt={project.title}
                width={600}
                loading='lazy'
                
                height={352}
                className={cn(
                  'w-full object-cover aspect-video group-hover:scale-110 transition-transform duration-300'
                )}
              />
            </div>
            <div className='flex items-center justify-between mb-3'>
              <h1 className='text-[length:calc(var(--text-font-size-base)*1.2)] font-bold builder'>{project.title}</h1>
              <div className='flex gap-2'>
                {project.url && (
                  <a
                    href={project.url}
                    target='_blank'
                    rel='noopener noreferrer'
                    className='p-2 hover:bg-black/10 rounded-full transition-colors'
                  >
                    <FaExternalLinkAlt />
                  </a>
                )}
                {project.gitUrl && (
                  <a
                    href={project.gitUrl}
                    target='_blank'
                    rel='noopener noreferrer'
                    className='p-2 hover:bg-black/10 rounded-full transition-colors'
                  >
                    <FaCodeBranch />
                  </a>
                )}
              </div>
            </div>
            <div className='flex flex-wrap gap-2 mb-3' style={{ justifyContent: styling?.align }}>
              {project.technologies.map((technology) => (
                <div key={technology} className={cn('text-sm p-2 rounded-lg bg-[var(--color-background)]')}>
                  {TechIcons[technology]}
                </div>
              ))}
            </div>
            <p className={cn('text-[length:calc(var(--text-font-size-base)*0.9)] opacity-90 builder')}>
              {project.description}
            </p>
          </div>
        ))}
      </div>
      {projects.length === 0 && <EmptyProjectsSection />}
    </Wrapper>
  );
}
