1"use client";
2
3import { Heart, Tag, Plane } from "lucide-react";
4import { useState } from "react";
5
6export const FlightCardNY = () => {
7  const [isLiked, setIsLiked] = useState(false);
8
9  return (
10    <div className="min-h-screen flex items-center justify-center p-8 bg-gray-50">
11      <div className="w-[390px] h-[550px] bg-white rounded-[2.5rem] shadow-2xl overflow-hidden relative">
12        {/* Background Image */}
13        <img
14          src="https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?q=80&w=2070&auto=format&fit=crop"
15          alt="New York City"
16          className="w-full h-full object-cover absolute inset-0"
17        />
18
19        {/* Bottom Gradient Overlay with Fading Blur */}
20        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent" />
21        <div className="absolute bottom-0 left-0 right-0 h-[350px] bg-gradient-to-t from-black/40 via-transparent to-transparent backdrop-blur-sm" style={{
22          maskImage: 'linear-gradient(to top, black 0%, black 40%, transparent 100%)',
23          WebkitMaskImage: 'linear-gradient(to top, black 0%, black 40%, transparent 100%)'
24        }} />
25
26        {/* Heart Icon */}
27        <button
28          onClick={() => setIsLiked(!isLiked)}
29          className="absolute top-5 right-5 w-11 h-11 flex items-center justify-center rounded-full bg-white/20 backdrop-blur-md border border-white/30 hover:bg-white/30 transition-all z-10"
30        >
31          <Heart
32            className={`w-5 h-5 transition-colors ${
33              isLiked
34                ? "text-red-500 fill-red-500"
35                : "text-white"
36            }`}
37          />
38        </button>
39
40        {/* Content */}
41        <div className="absolute bottom-0 left-0 right-0 p-6 z-10">
42          {/* Title and Subtitle */}
43          <div className="mb-4">
44            <h2 className="text-[2.5rem] font-bold text-white mb-0.5 leading-none">New York</h2>
45            <p className="text-white/70 text-base">Economy</p>
46          </div>
47
48          {/* Price and Airport Info */}
49          <div className="flex items-center gap-6 mb-5">
50            <div className="flex items-center gap-2 text-white">
51              <Tag className="w-[18px] h-[18px] text-white/80" />
52              <span className="text-base font-normal">from <span className="font-bold">$120</span></span>
53            </div>
54            <div className="flex items-center gap-2 text-white">
55              <Plane className="w-[18px] h-[18px] text-white/80" />
56              <span className="text-base font-semibold">JFK</span>
57            </div>
58          </div>
59
60          {/* CTA Button */}
61          <button className="w-full bg-white hover:bg-gray-100 text-gray-900 font-semibold text-base py-[15px] rounded-full transition-all">
62            Search flight
63          </button>
64        </div>
65      </div>
66    </div>
67  );
68};
69