import React from 'react';
import type { ManagedContract } from '@/types/ManagedContract';
import { StatusBadge } from '@/components/ui/StatusBadge';
import { Card } from './Card';

interface ServiceObjectProps {
  contract: ManagedContract;
}

export const ServiceObject: React.FC<ServiceObjectProps> = ({ contract }) => {
  return (
    <Card variant= 'prophunt' className="p-4 flex flex-col cursor-pointer">
      <div className='flex flex-row justify-between'>
        <h3 className="text-sm font-medium text-slate-900">{contract.service_name}</h3>
        {/* Fonctionne instantanément avec 'Actif', 'En déploiement', 'Suspendu' */}
        <StatusBadge status={contract.status} />
      </div>
      {contract.description && (
        <p className="text-xs text-slate-500 mt-1">{contract.description}</p>
      )}
    </Card>
  );
};