"use client"

import Link from "next/link"
import { WifiOff, Download, Home, Music } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function OfflinePage() {
  return (
    <div className="min-h-screen bg-background flex items-center justify-center p-4">
      <div className="text-center max-w-md">
        <div className="mb-6 flex justify-center">
          <div className="rounded-full bg-secondary p-6">
            <WifiOff className="h-12 w-12 text-muted-foreground" />
          </div>
        </div>

        <h1 className="text-2xl font-bold text-foreground mb-2">Vous etes hors ligne</h1>

        <p className="text-muted-foreground mb-8">
          Pas de connexion internet. Vous pouvez toujours ecouter vos titres telecharges.
        </p>

        <div className="space-y-3">
          <Link href="/downloads" className="block">
            <Button className="w-full gap-2">
              <Download className="h-4 w-4" />
              Mes telechargements
            </Button>
          </Link>

          <Link href="/home" className="block">
            <Button variant="outline" className="w-full gap-2 bg-transparent">
              <Home className="h-4 w-4" />
              Reessayer
            </Button>
          </Link>
        </div>

        <div className="mt-12 flex items-center justify-center gap-2 text-muted-foreground">
          <Music className="h-5 w-5" />
          <span className="font-semibold">Musique</span>
        </div>
      </div>
    </div>
  )
}
