import { CopyIcon, ExternalLinkIcon, PaperclipIcon } from "lucide-react"

import {
  AttributeCard,
  AttributeHeader,
  AttributeItem,
  AttributeList,
} from "@/components/ui/attribute"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

export function AttributeDemo() {
  return (
    <div className="grid max-w-5xl gap-4 lg:grid-cols-2">
      <AttributeCard>
        <AttributeHeader
          title="Company profile"
          description="Key-value information in a scannable card."
        />
        <AttributeList>
          <AttributeItem label="Name">Banhaten</AttributeItem>
          <AttributeItem label="Location">Remote</AttributeItem>
          <AttributeItem label="Website">
            <a
              className="inline-flex items-center gap-[var(--bh-space-xxs-2)] text-[var(--bh-content-link)] hover:text-[var(--bh-content-link-hover)]"
              href="https://banhaten.com"
            >
              banhaten.com
              <ExternalLinkIcon className="size-[var(--bh-space-3xl-16)]" />
            </a>
          </AttributeItem>
          <AttributeItem label="Industry">
            <Badge>Design</Badge>
          </AttributeItem>
        </AttributeList>
      </AttributeCard>

      <AttributeCard>
        <AttributeHeader
          title="Order details"
          description="End-aligned values, copy actions, files, and status chips."
        />
        <AttributeList layout="end" dividers>
          <AttributeItem label="Subscription">
            <Badge color="green" type="dot">
              Active
            </Badge>
          </AttributeItem>
          <AttributeItem label="API key" truncate>
            sk_live_************1234
            <Button aria-label="Copy API key" size="icon-xs" variant="outline">
              <CopyIcon />
            </Button>
          </AttributeItem>
          <AttributeItem label="Invoice">
            <span className="inline-flex min-w-0 items-center gap-[var(--bh-space-md-8)]">
              <PaperclipIcon className="size-[var(--bh-space-4xl-20)] shrink-0 text-[var(--bh-content-muted)]" />
              INV-2024-00123.pdf
            </span>
          </AttributeItem>
        </AttributeList>
      </AttributeCard>
    </div>
  )
}
