import { Badge } from '@/components/ui/badge';
import { useTranslation } from '@/hooks/use-translation';
import type { LogementShowListing } from '@/types/logement-show';
import { ExternalLink } from 'lucide-react';
import { NS } from '../format';
import { DetailCard, DetailRow } from './detail-card';

/** Annonces publiées du logement, synchronisées par canal (lecture seule). */
export function ListingsCard({ listings }: { listings: LogementShowListing[] }) {
    const { t } = useTranslation();

    if (listings.length === 0) {
        return null;
    }

    return (
        <DetailCard title={t(NS, 'card_listings')}>
            {listings.map((listing) => (
                <DetailRow key={listing.id} label={listing.channel}>
                    <span className="inline-flex flex-wrap items-center justify-end gap-2">
                        {!listing.is_active && (
                            <Badge variant="outline" className="text-muted-foreground font-normal">
                                {t(NS, 'listing_inactive')}
                            </Badge>
                        )}
                        <a
                            href={listing.url}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-primary dark:text-secondary inline-flex items-center gap-1 hover:underline"
                        >
                            {t(NS, 'view_listing')}
                            <ExternalLink className="h-3.5 w-3.5" />
                        </a>
                    </span>
                </DetailRow>
            ))}
        </DetailCard>
    );
}