'use client';
import { Button } from '@/components/ui/button';
import { ProjectItemProps } from '@/src/types/projectEditor';
import { PortfolioProjectStatus } from '@prisma/client';
import { Trash2 } from 'lucide-react';

export function ProjectItem({ project, onEdit, onRemove, onApprove, onReject }: ProjectItemProps) {
  return (
    <div className='flex items-center justify-between'>
      <div>
        <div className='flex items-center gap-2'>
          <h3 className='font-medium'>{project.title}</h3>
        </div>
      </div>
      <div className='space-x-2 flex flex-row'>
        {project.status === PortfolioProjectStatus.PENDING ? (
          <div className='flex flex-row gap-4'>
            <Button
              size='sm'
              variant='ghost'
              className='text-green-700 hover:text-green-800 p-0'
              onClick={() => onApprove(project.id)}
            >
              Approve
            </Button>
            <Button
              size='sm'
              variant='ghost'
              className='text-red-700 hover:text-red-800 p-0'
              onClick={() => onReject(project.id)}
            >
              Reject
            </Button>
          </div>
        ) : (
          <div className='flex flex-row gap-2'>
            <Button size='sm' variant='ghost' onClick={() => onEdit(project.id)}>
              Edit
            </Button>
            <Button size='sm' variant='ghost' className='text-neutral-800 p-0' onClick={() => onRemove(project.id)}>
              <Trash2 className='h-4 w-4' />
            </Button>
          </div>
        )}
      </div>
    </div>
  );
}
