'use client';
import { Badge } from '@/components/ui/badge';
import { FaCheck, FaTimes } from 'react-icons/fa';
import { PortfolioCardProps } from '@/types/portfolio';
import { PortfolioActionButtons } from './PortfolioActionButtons';

export function PortfolioCard({ portfolio, onDelete, onInvitation, isDeleting }: PortfolioCardProps) {
  return (
    <div className='bg-neutral-200 p-4 rounded-lg border border-neutral-700 hover:border-neutral-600 transition-colors'>
      <div className='flex flex-col-reverse sm:flex-row sm:justify-between sm:items-start gap-2'>
        <h3 className='text-lg font-semibold text-neutral-900'>{portfolio.title}</h3>
        {portfolio.status === 'APPROVED' ? (
          <div className='flex flex-col gap-2 sm:justify-end sm:items-end'>
          <Badge variant={portfolio.role === 'Owner' ? 'owner' : 'contributor'} className='w-fit'>
            {portfolio.role}
          </Badge>
          {portfolio.role !== 'Owner' && (
            <Badge variant='username'>
              Created by  {portfolio.owner}
            </Badge>
          )}
          </div>
        ) : (
          <div className='flex flex-col gap-2 w-full sm:w-auto'>
            <div className='text-sm text-neutral-400 mb-1'>
              <span>Invitation from </span>
              <span className='font-medium text-neutral-200 bg-neutral-500/50 px-2 py-0.5 rounded-md ml-1 inline-block mt-1 sm:mt-0'>
                {portfolio.owner}
              </span>
            </div>
            <div className='flex gap-2 justify-start sm:justify-end'>
              <button
                onClick={() => onInvitation(portfolio.id, true)}
                className='flex-1 sm:flex-none px-2 py-1 bg-green-800 hover:bg-green-700 rounded-md 
                  flex items-center justify-center gap-2 transition-colors text-sm font-medium'
              >
                <FaCheck className='w-4 h-4' />
                <span>Accept</span>
              </button>
              <button
                onClick={() => onInvitation(portfolio.id, false)}
                className='flex-1 sm:flex-none px-2 py-1 bg-red-800 hover:bg-red-700 rounded-md 
                  flex items-center justify-center gap-2 transition-colors text-sm font-medium'
              >
                <FaTimes className='w-4 h-4' />
                <span>Decline</span>
              </button>
            </div>
          </div>
        )}
      </div>

      <div className='text-neutral-600 mt-2'>
        <p>Created: {new Date(portfolio.createdAt).toLocaleDateString()}</p>
        <p>Updated: {new Date(portfolio.updatedAt).toLocaleDateString()}</p>
      </div>

      {portfolio.status === 'APPROVED' && (
        <PortfolioActionButtons portfolio={portfolio} isDeleting={isDeleting} onDelete={onDelete} />
      )}
    </div>
  );
}
