'use client';
import { Badge } from '@/components/ui/badge';
import { CiImageOff } from 'react-icons/ci';
import { TechIcons } from '../icons/TechIcons';
import { ActionButtons } from '../common/ActionButtons';
import { ProjectEntryProps } from '@/types/project';
import { PortfolioProjectStatus } from '@prisma/client';
import Image from 'next/image';

export function ProjectEntry({ isAuthor, project, actions = [] }: ProjectEntryProps) {
  return (
    <div className='flex flex-col gap-2 p-4 bg-neutral-200 rounded-lg border border-neutral-700 hover:border-neutral-600 transition-colors'>
      <div className='flex sm:flex-row flex-col gap-4'>
        <div className='sm:w-[200px] sm:h-[112px] w-full h-full aspect-video relative flex-shrink-0'>
          {project.image ? (
            <Image src={project.image} alt={project.title} fill className='rounded-md object-cover' />
          ) : (
            <div className='w-full h-full bg-neutral-700 rounded-md flex items-center justify-center'>
              <CiImageOff size={40} className='text-neutral-500' />
            </div>
          )}
        </div>

        <div className='flex-1'>
          <div className='flex sm:flex-row flex-col-reverse justify-between items-start mb-2'>
            <h3 className='text-lg font-semibold text-neutral-900'>{project.title}</h3>
            {('isOwner' in project && !project.isOwner || !isAuthor) && 'status' in project && project.status && (
              <div className='flex flex-col gap-2 sm:justify-end sm:items-end'>
                <Badge
                  variant={
                    project.status === PortfolioProjectStatus.APPROVED
                      ? 'approved'
                      : project.status === PortfolioProjectStatus.REJECTED
                        ? 'rejected'
                        : 'pending'
                  }
                  className='w-fit'
                >
                  {project.status}
                </Badge>
                {isAuthor && (
                  <Badge variant='username'>
                    Created by {project.username}
                  </Badge>
                )}
              </div>
            )}
          </div>

          <p className='text-neutral-600 text-sm mb-2 line-clamp-2'>{project.description}</p>
          <div className='flex gap-2 text-neutral-800 flex-wrap'>
            {project.technologies.map((technology) => (
              <div key={technology}>{TechIcons[technology]}</div>
            ))}
          </div>
        </div>
      </div>

      {actions.length > 0 && (
        <div className='flex'>
          <ActionButtons actions={actions} />
        </div>
      )}
    </div>
  );
}
