Description List

import {
  DescriptionList,
  DescriptionListItem,
  DescriptionListTerm,
  DescriptionListDescription,
} from '@/components/ui/description-list'

export default function Example() {
  return (
    <>
      {/* Using items prop (simple) */}
      <DescriptionList
        layout="stacked"
        items={[
          { term: 'Name', description: 'John Doe' },
          { term: 'Email', description: 'john@example.com' },
        ]}
      />

      {/* With icons */}
      <DescriptionList
        layout="horizontal"
        items={[
          { term: 'Email', description: 'john@example.com', icon: <Mail /> },
          { term: 'Phone', description: '+1 555-1234', icon: <Phone /> },
        ]}
      />

      {/* Custom composition */}
      <DescriptionList layout="stacked">
        <DescriptionListItem>
          <DescriptionListTerm icon={<User />}>Name</DescriptionListTerm>
          <DescriptionListDescription>
            <span className="font-medium">John Doe</span>
          </DescriptionListDescription>
        </DescriptionListItem>
      </DescriptionList>

      {/* Different sizes */}
      <DescriptionList size="sm" items={items} />
      <DescriptionList size="md" items={items} />
      <DescriptionList size="lg" items={items} />
    </>
  )
}