type ListedDealProps = {
  deal: {
    id: number;
    title: string;
    description: string;
    image: string;
    price: number;
    upvotes?: number;
    comments?: number;
  };
};



export default function ListedDeal({ deal }: ListedDealProps) {
  return (
    <div className="flex gap-4 bg-surface p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
      {/* Görsel */}
      <div className="w-32 h-32 flex-shrink-0">
        <img
          src={deal.image}
          alt={deal.title}
          className="w-full h-full object-cover rounded-md"
        />
      </div>

      {/* İçerik */}
      <div className="flex flex-col justify-between flex-1">
        <div>
          <h2 className="text-lg font-semibold text-text hover:text-primary cursor-pointer">
            {deal.title}
          </h2>
          <p className="text-sm text-text-muted line-clamp-2 mt-1">
            {deal.description}
          </p>
        </div>

        {/* Alt bilgi */}
        <div className="flex items-center justify-between mt-3">
          <span className="text-primary font-bold text-base">
            {deal.price.toLocaleString()} ₺
          </span>

          <div className="flex items-center gap-3 text-sm text-text-muted">
            <span>🔥 {deal.upvotes ?? 0}</span>
            <span>💬 {deal.comments ?? 0}</span>
          </div>
        </div>
      </div>
    </div>
  );
}