"use client";

import { PageHeader } from "@exxatdesignux/ui/components/ui/page-header";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tip } from "@/components/ui/tip";

export function DetailsPageTemplatePreview() {
  return (
    <div className="w-full overflow-hidden rounded-lg border border-border bg-background">
      <nav
        aria-label="Breadcrumb preview"
        className="flex min-h-11 items-center gap-2 border-b border-border px-4 text-sm text-muted-foreground"
      >
        <span>Records</span>
        <i className="fa-light fa-chevron-right text-2xs" aria-hidden="true" />
        <span className="truncate text-foreground">Record details</span>
      </nav>

      <PageHeader
        headingLevel="h2"
        title="Record details"
        subtitle="REC-2026-014 · Updated today"
        actions={
          <Tip label="More actions" side="bottom">
            <Button
              type="button"
              variant="outline"
              size="icon-sm"
              aria-label="More actions"
            >
              <i className="fa-light fa-ellipsis" aria-hidden="true" />
            </Button>
          </Tip>
        }
      />

      <div className="grid gap-4 px-4 pb-6 lg:grid-cols-[minmax(0,2fr)_minmax(14rem,1fr)] lg:px-6">
        <Card>
          <CardHeader>
            <CardTitle>Overview</CardTitle>
          </CardHeader>
          <CardContent className="grid gap-4 sm:grid-cols-2">
            <div>
              <p className="text-xs text-muted-foreground">Status</p>
              <Badge variant="outline" className="mt-1">
                Active
              </Badge>
            </div>
            <div>
              <p className="text-xs text-muted-foreground">Owner</p>
              <p className="mt-1 text-sm text-foreground">Alex Morgan</p>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Activity</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-muted-foreground">Updated today</p>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}