import Link from "next/link"
import { ChevronLeft, MapPin, Calendar, Ticket, ExternalLink } from "lucide-react"
import { Button } from "@/components/ui/button"
import { BottomNav } from "@/components/bottom-nav"
import Image from "next/image"

const upcomingConcerts = [
  {
    id: "1",
    artist: "Stromae",
    venue: "AccorHotels Arena",
    city: "Paris",
    date: "15 Mar 2025",
    image: "/stromae-concert-stage-lights.jpg",
    price: "À partir de 42,640 FCFA",
  },
  {
    id: "2",
    artist: "Daft Punk",
    venue: "Stade de France",
    city: "Saint-Denis",
    date: "22 Juin 2025",
    image: "/daft-punk-electronic-music.jpg",
    price: "À partir de 58,384 FCFA",
  },
  {
    id: "3",
    artist: "The Weeknd",
    venue: "La Défense Arena",
    city: "Paris",
    date: "10 Sep 2025",
    image: "/the-weeknd-concert-r.jpg",
    price: "À partir de 49,200 FCFA",
  },
]

export default function ConcertsPage() {
  return (
    <div className="min-h-screen bg-background pb-24">
      <div className="mx-auto max-w-md px-4 py-6">
        {/* Header */}
        <div className="mb-6 flex items-center gap-4">
          <Link href="/" className="text-foreground hover:text-primary">
            <ChevronLeft className="h-6 w-6" />
          </Link>
          <h1 className="text-xl font-bold text-foreground">Concerts</h1>
        </div>

        {/* Location filter */}
        <button className="mb-6 flex items-center gap-2 rounded-full bg-secondary/50 px-4 py-2 text-sm">
          <MapPin className="h-4 w-4 text-primary" />
          <span className="text-foreground">Paris et environs</span>
        </button>

        {/* Concerts list */}
        <div className="space-y-4">
          {upcomingConcerts.map((concert) => (
            <div key={concert.id} className="overflow-hidden rounded-xl bg-secondary/50">
              <div className="relative h-40">
                <Image src={concert.image || "/placeholder.svg"} alt={concert.artist} fill className="object-cover" />
                <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent" />
                <div className="absolute bottom-4 left-4">
                  <h3 className="text-xl font-bold text-white">{concert.artist}</h3>
                </div>
              </div>
              <div className="p-4">
                <div className="mb-3 flex items-center gap-4 text-sm text-muted-foreground">
                  <div className="flex items-center gap-1">
                    <Calendar className="h-4 w-4" />
                    <span>{concert.date}</span>
                  </div>
                  <div className="flex items-center gap-1">
                    <MapPin className="h-4 w-4" />
                    <span>
                      {concert.venue}, {concert.city}
                    </span>
                  </div>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-foreground">{concert.price}</span>
                  <Button size="sm" className="gap-2">
                    <Ticket className="h-4 w-4" />
                    Réserver
                    <ExternalLink className="h-3 w-3" />
                  </Button>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Info */}
        <p className="mt-6 text-center text-sm text-muted-foreground">Les billets sont vendus par nos partenaires</p>
      </div>

      <BottomNav />
    </div>
  )
}
