'use client';

import { useTranslations } from 'next-intl';
import { Card, Button } from 'react-bootstrap';
import { useAuth } from '@/contexts/AuthContext';
import { Annonce } from '@/services/annonceService';

interface AnnonceCardProps {
  annonce: Annonce;
  onDelete?: (id: number) => void;
}

export default function AnnonceCard({ annonce, onDelete }: AnnonceCardProps) {
  const t = useTranslations('Annonces');
  const { isAuthenticated, user } = useAuth();

  const isOwner = isAuthenticated && user?.username === annonce.auteur?.pseudo;

  return (
    <Card className="mb-3">
      <Card.Body>
        <div className="d-flex justify-content-between align-items-start">
          <Card.Title>{annonce.titre}</Card.Title>
          {isOwner && onDelete && (
            <Button
              variant="link"
              size="sm"
              className="text-danger p-0"
              onClick={() => onDelete(annonce.id)}
            >
              {t('delete')}
            </Button>
          )}
        </div>
        {annonce.texte && <Card.Text>{annonce.texte}</Card.Text>}
        <div className="text-muted small">
          {annonce.auteur?.pseudo && <span>{annonce.auteur.pseudo}</span>}
          {annonce.date && <span className="ms-2">{annonce.date}</span>}
        </div>
      </Card.Body>
    </Card>
  );
}