import { Boxes } 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("Resources")

export default function ResourcesRoute() {
  return (
    <AppShell title="Resources">
      <Card>
        <CardHeader>
          <CardTitle>Resources</CardTitle>
          <CardDescription>
            A list/detail surface for the entities your app manages.
          </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">
              <Boxes className="size-6" />
            </div>
            <div className="max-w-md">
              <p className="font-medium">No resources yet</p>
              <p className="mt-1 text-sm text-muted-foreground">
                This route is the canonical "traditional" surface. Drop in{" "}
                <code className="font-mono text-xs">@crema/table-ui</code> or{" "}
                <code className="font-mono text-xs">@crema/data-ui</code> when
                you have data to show.
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </AppShell>
  )
}