holiday-travel-app/components/DealCard.tsx

'use client';
import { ExternalLink, Plane, Calendar, DollarSign, Link as LinkIcon } from "lucide-react";
import type { Deal } from "@/lib/types";

export default function DealCard({ deal }: { deal: Deal }) {
  return (
    <div className="card p-4 flex flex-col gap-3">
      <div className="flex items-start justify-between gap-3">
        <div>
          <h3 className="text-base md:text-lg font-semibold">{deal.title}</h3>
          <div className="mt-1 flex flex-wrap gap-2">
            <span className="badge">{deal.source}</span>
            {deal.destination && <span className="badge"><Plane className="w-3 h-3 mr-1" /> {deal.origin} → {deal.destination}</span>}
            {deal.nights != null && <span className="badge"><Calendar className="w-3 h-3 mr-1" /> {deal.nights} nights</span>}
            {deal.price != null && <span className="badge"><DollarSign className="w-3 h-3 mr-1" />{deal.price} {deal.currency || ""}</span>}
          </div>
        </div>
        <a className="btn" href={deal.link} target="_blank" rel="noreferrer">
          Open <ExternalLink className="w-4 h-4 ml-2" />
        </a>
      </div>
      <div className="text-sm opacity-80 flex gap-4">
        {deal.startDate && <span>Depart: {deal.startDate}</span>}
        {deal.endDate && <span>Return: {deal.endDate}</span>}
        <span className="ml-auto flex items-center gap-1"><LinkIcon className="w-3 h-3" /> {new URL(deal.link, "http://x").host}</span>
      </div>
    </div>
  );
}