Key Value

import { KeyValue, KeyValueGroup } from '@/components/ui/key-value'

export default function Example() {
  return (
    <>
      {/* Basic key-value */}
      <KeyValue label="Name" value="John Doe" />

      {/* With copy button */}
      <KeyValue
        label="API Key"
        value="sk-1234-5678"
        copyable
      />

      {/* Monospace value */}
      <KeyValue label="ID" value="#ORD-001" mono />

      {/* Different layouts */}
      <KeyValue layout="horizontal" label="Key" value="Value" />
      <KeyValue layout="vertical" label="Key" value="Value" />
      <KeyValue layout="inline" label="Key" value="Value" />

      {/* Different sizes */}
      <KeyValue size="sm" label="Small" value="Value" />
      <KeyValue size="md" label="Medium" value="Value" />
      <KeyValue size="lg" label="Large" value="Value" />

      {/* Key Value Group */}
      <KeyValueGroup
        items={[
          { label: 'Name', value: 'John' },
          { label: 'Email', value: 'john@example.com', copyable: true },
        ]}
      />

      {/* Divided group */}
      <KeyValueGroup
        divided
        spacing="md"
        items={items}
      />

      {/* Copy different value than displayed */}
      <KeyValue
        label="Secret"
        value="••••••••"
        copyable
        copyValue="actual-secret-value"
      />
    </>
  )
}