import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { Header } from '@/components/header'
import { Footer } from '@/components/footer'
import { FileX, ArrowLeft } from 'lucide-react'

export default function TopicNotFound() {
  return (
    <div className="min-h-screen bg-background">
      <Header />
      <main className="container pt-24 pb-16">
        <div className="max-w-2xl mx-auto text-center">
          <Card className="border-dashed">
            <CardContent className="p-12">
              <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mx-auto mb-6">
                <FileX className="w-8 h-8 text-muted-foreground" />
              </div>
              
              <h1 className="text-3xl font-bold mb-4">Topic Post Not Found</h1>
              <p className="text-muted-foreground mb-8 leading-relaxed">
                The topic post you're looking for doesn't exist or may have been moved. 
                It could be a mistyped URL or the post might have been removed.
              </p>
              
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Button asChild>
                  <Link href="/topics" className="flex items-center gap-2">
                    <ArrowLeft className="w-4 h-4" />
                    Back to Topic
                  </Link>
                </Button>
                <Button variant="outline" asChild>
                  <Link href="/">Go Home</Link>
                </Button>
              </div>
              
              <div className="mt-8 p-4 bg-muted/50 rounded-lg">
                <p className="text-sm text-muted-foreground">
                  Looking for something specific? Try searching or browsing our latest articles.
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </main>
      <Footer />
    </div>
  )
}