import { BookOpen } from "lucide-react"

import { AppShell } from "~/components/layout/app-shell"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card"
import { pageTitle } from "~/lib/page-meta"

export const meta = () => pageTitle("Library")

export default function LibraryRoute() {
  return (
    <AppShell title="Library">
      <Card>
        <CardHeader>
          <CardTitle>Library</CardTitle>
          <CardDescription>
            Saved items, templates, and reusable artifacts.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-muted-foreground/20 bg-muted/30 p-12 text-center">
            <div className="flex size-12 items-center justify-center rounded-xl bg-background text-muted-foreground">
              <BookOpen className="size-6" />
            </div>
            <div className="max-w-md">
              <p className="font-medium">Library is empty</p>
              <p className="mt-1 text-sm text-muted-foreground">
                A home for AI-generated artifacts and saved snippets — pair
                with <code className="font-mono text-xs">@crema/artifact-ui</code>{" "}
                when you start producing them.
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </AppShell>
  )
}