import { h } from "preact"
import { Grid, GridCol } from "@/comps/echo/grid"
import { Skeleton } from "@/comps/echo/core"
 
function makeChild(cls: string) {
    return ({ text }: { text: string }) => (
        <Skeleton class={`w-full bold ${cls}`} height={50} radius={6} animate={false} >{text}</Skeleton>
    )
}
 
const Child1 = makeChild("bg-blue-200 text-blue-500")
const Child2 = makeChild("bg-green-200 text-green-500")
const Child3 = makeChild("bg-red-200 text-red-500")
const Child4 = makeChild("bg-orange-200 text-orange-500")
 
export function GridDemo() {
    return <Grid class="w-[360px]">
        <GridCol span={{ base: 12, xs: 4 }}><Child1 text="1" /></GridCol>
        <GridCol span={{ base: 12, xs: 4 }}><Child1 text="2" /></GridCol>
        <GridCol span={{ base: 12, xs: 4 }}><Child1 text="3" /></GridCol>
        <GridCol span={4}><Child2 text="A" /></GridCol>
        <GridCol span={4}><Child2 text="B" /></GridCol>
        <GridCol span={4}><Child2 text="C" /></GridCol>
        <GridCol span={6}><Child3 text="Left" /></GridCol>
        <GridCol span={6}><Child3 text="Right" /></GridCol>
        <GridCol span={3}><Child4 text="1" /></GridCol>
        <GridCol span={3}><Child4 text="2" /></GridCol>
        <GridCol span={3} offset={3}><Child4 text="3" /></GridCol>
    </Grid>
}

import { h } from "preact"
import { SimpleGrid } from "@/comps/echo/grid"
 
export function SimpleGridDemo() {
    return <div class="w-[360px] flex flex-col p-4">
        <SimpleGrid cols={4} spacing={4} class="w-full mb-4">
            <div class="bg-red-500 text-white p-4">Item 1</div>
            <div class="bg-red-500 text-white p-4">Item 2</div>
            <div class="bg-red-500 text-white p-4">Item 3</div>
            <div class="bg-red-500 text-white p-4">Item 4</div>
            <div class="bg-red-500 text-white p-4">Item 5</div>
            <div class="bg-red-500 text-white p-4">Item 6</div>
        </SimpleGrid>
        <SimpleGrid cols={3} spacing={8} class="w-full">
            <div class="bg-purple-500 text-white p-4">Item A</div>
            <div class="bg-purple-500 text-white p-4">Item B</div>
            <div class="bg-purple-500 text-white p-4">Item C</div>
            <div class="bg-purple-500 text-white p-4">Item D</div>
        </SimpleGrid>
    </div>
}

import { h } from "preact"
import { Stack } from "@/comps/echo/grid"
 
export function StackDemo() {
    return <div class="w-[360px] flex flex-col gap-4 p-8 bg-gray-200">
        <Stack class="mb-4">
            <div class="bg-blue-500 text-white p-2">Item 1</div>
            <div class="bg-blue-500 text-white p-2">Item 2</div>
            <div class="bg-blue-500 text-white p-2">Item 3</div>
        </Stack>
        <Stack vertical={false} spacing={16}>
            <div class="bg-green-500 text-white p-2">Item A</div>
            <div class="bg-green-500 text-white p-2">Item B</div>
            <div class="bg-green-500 text-white p-2">Item C</div>
        </Stack>
    </div>
}