'use client';
import React from 'react';
import {useTranslations} from 'next-intl';
import {Badge, Button} from 'react-bootstrap';
import type {Carpool} from '@/services/covoiturageService';

interface CarpoolItemProps {
  carpool: Carpool;
  /** Membre connecté, auteur de l'annonce : il peut la corriger ou la supprimer. */
  isOwner: boolean;
  /** Membre connecté, autre que l'auteur : il peut le contacter. */
  canContact: boolean;
  onContact: (carpool: Carpool) => void;
  onEdit: (carpool: Carpool) => void;
  onDelete: (id: number) => void;
}

/** Une ligne de covoiturage : auteur, sens, ville — places — heure, et les actions du membre. */
export default function CarpoolItem({carpool, isOwner, canContact, onContact, onEdit, onDelete}: CarpoolItemProps) {
  const t = useTranslations('Carpool');

  return (
    <div className="carpool-item border-bottom py-3">
      <div className="d-flex justify-content-between align-items-start">
        <div>
          <strong>{carpool.auteur?.pseudo || 'Anonyme'}</strong>
          <Badge bg={carpool.propose ? 'success' : 'info'} className="ms-2">
            {carpool.propose ? t('offers') : t('requests')}
          </Badge>
        </div>
        <div className="d-flex gap-2">
          {canContact && (
            <Button variant="link" size="sm" className="p-0" onClick={() => onContact(carpool)}>
              {t('contact')}
            </Button>
          )}
          {isOwner && (
            <>
              <Button variant="link" size="sm" className="p-0" onClick={() => onEdit(carpool)}>
                {t('edit')}
              </Button>
              <Button variant="link" size="sm" className="text-danger p-0" onClick={() => onDelete(carpool.id)}>
                {t('delete')}
              </Button>
            </>
          )}
        </div>
      </div>
      <p className="mb-0 mt-1">
        {carpool.ville} — {carpool.nombre} {t('seats_label')}
        {carpool.heure && ` — ${carpool.heure}`}
      </p>
    </div>
  );
}