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

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

  return (
    <Wrapper id={sectionId} styling={styling} className='px-4'>
      <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
        {projects.map((project) => (
          <div
            key={project.id}
            className={cn(
              'flex flex-col h-full rounded-lg shadow-md hover:shadow-xl',
              'transition-all duration-300 overflow-hidden relative',
              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='relative group aspect-video w-full'>
              <Image src={project.image} alt={project.title} fill className='object-cover' loading='lazy'  />
              <div
                className='absolute inset-0 opacity-0 
                group-hover:opacity-100 transition-opacity duration-300 flex items-center 
                justify-center gap-4'
              >
                {project.url && (
                  <a
                    href={project.url}
                    target='_blank'
                    rel='noopener noreferrer'
                    className='p-3 bg-white rounded-full transform scale-0 group-hover:scale-100 
                      transition-transform duration-300'
                  >
                    <FaExternalLinkAlt style={{ color: color }} />
                  </a>
                )}
                {project.gitUrl && (
                  <a
                    href={project.gitUrl}
                    target='_blank'
                    rel='noopener noreferrer'
                    className='p-3 bg-white rounded-full transform scale-0 group-hover:scale-100 
                      transition-transform duration-300'
                  >
                    <FaCodeBranch style={{ color: color }} />
                  </a>
                )}
              </div>
            </div>
            <div className='p-4 flex flex-col flex-1 bg-white/50 dark:bg-neutral-800/50 backdrop-blur-sm'>
              <div>
                <h1 className='text-[length:calc(var(--text-font-size-base)*1.1)] font-bold mb-2 builder text-[var(--color-text)]'>
                  {project.title}
                </h1>
                <p className={cn('text-[length:calc(var(--text-font-size-base)*0.8)] mb-3 builder')}>
                  {project.description}
                </p>
              </div>
              <div className='flex flex-wrap gap-2 mt-auto pt-2' style={{ justifyContent: styling?.align }}>
                {project.technologies.map((technology) => (
                  <div key={technology} className={cn('p-2 rounded-lg')}>
                    {TechIcons[technology]}
                  </div>
                ))}
              </div>
            </div>
          </div>
        ))}
      </div>
      {projects.length === 0 && <EmptyProjectsSection />}
    </Wrapper>
  );
}
