Stack

import { Stack, HStack, VStack } from '@otfdashkit/ui/layouts-stack'

const Box = ({ label }: { label: string }) => (
  <div className="px-3 py-2 rounded-md bg-[hsl(var(--accent))] text-[hsl(var(--foreground))] text-sm font-medium whitespace-nowrap">
    {label}
  </div>
)

export function Example() {
  return (
    <VStack gap={6} className="p-4">
      <div>
        <p className="text-xs text-[hsl(var(--muted-foreground))] mb-2 font-medium uppercase tracking-wider">HStack (row, gap=4)</p>
        <HStack gap={4} align="center" wrap>
          {['Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon'].map(l => <Box key={l} label={l} />)}
        </HStack>
      </div>
      <div>
        <p className="text-xs text-[hsl(var(--muted-foreground))] mb-2 font-medium uppercase tracking-wider">VStack (col, gap=2)</p>
        <VStack gap={2} className="max-w-xs">
          {['First', 'Second', 'Third'].map(l => <Box key={l} label={l} />)}
        </VStack>
      </div>
      <div>
        <p className="text-xs text-[hsl(var(--muted-foreground))] mb-2 font-medium uppercase tracking-wider">Stack justify=between</p>
        <HStack gap={2} justify="between" className="border border-[hsl(var(--border))] rounded-md p-3">
          <Box label="Left" />
          <Box label="Center" />
          <Box label="Right" />
        </HStack>
      </div>
    </VStack>
  )
}