import { defineComponent } from "vue";
import AuthenticatedLayout from "@/Layouts/Authenticated";
import Button from "@/Components/Button";
import { GithubIcon } from "@/Components/Icons/brands";
import { HomeIcon } from "@heroicons/vue/outline";

const Header = defineComponent({
    setup() {
        return () => (
            <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                <h2 class="text-xl font-semibold leading-tight">Buttons</h2>

                <Button
                    external
                    variant="black"
                    target="_blank"
                    class="items-center gap-2 max-w-xs"
                    href="https://github.com/kamona-wd/kui-laravel-breeze"
                >
                    {({ iconSizeClasses }) => (
                        <>
                            <GithubIcon
                                aria-hidden="true"
                                class={iconSizeClasses}
                            />
                            <span>Star on Github</span>
                        </>
                    )}
                </Button>
            </div>
        );
    },
});

export default defineComponent({
    setup() {
        let buttonsVariants = [
            "primary",
            "secondary",
            "success",
            "danger",
            "warning",
            "info",
            "black",
        ];

        let buttonSizes = ["sm", "base", "lg"];

        return () => (
            <AuthenticatedLayout
                title="Buttons"
                v-slots={{ header: () => <Header /> }}
            >
                <div class="grid items-center gap-6 mt-4">
                    {buttonsVariants.map((variant) => (
                        <div
                            key={variant}
                            class="grid items-start grid-cols-3 gap-4 justify-items-center"
                        >
                            {buttonSizes.map((size) => (
                                <Button
                                    key={size}
                                    type="button"
                                    variant={variant}
                                    size={size}
                                >
                                    Button
                                </Button>
                            ))}
                        </div>
                    ))}

                    {buttonsVariants.map((variant) => (
                        <div
                            key={variant}
                            class="grid items-start grid-cols-3 gap-4 justify-items-center"
                        >
                            {buttonSizes.map((size) => (
                                <Button
                                    key={size}
                                    type="button"
                                    variant={variant}
                                    size={size}
                                    class="justify-center gap-2"
                                >
                                    {({ iconSizeClasses }) => (
                                        <>
                                            <HomeIcon
                                                aria-hidden="true"
                                                class={iconSizeClasses}
                                            />
                                            <span>Button</span>
                                        </>
                                    )}
                                </Button>
                            ))}
                        </div>
                    ))}

                    {buttonsVariants.map((variant) => (
                        <div
                            key={variant}
                            class="grid items-start grid-cols-3 gap-4 justify-items-center"
                        >
                            {buttonSizes.map((size) => (
                                <Button
                                    iconOnly
                                    key={size}
                                    type="button"
                                    variant={variant}
                                    size={size}
                                    class="justify-center gap-2"
                                >
                                    {({ iconSizeClasses }) => (
                                        <>
                                            <HomeIcon
                                                aria-hidden="true"
                                                class={iconSizeClasses}
                                            />
                                            <span class="sr-only">
                                                Icon only button
                                            </span>
                                        </>
                                    )}
                                </Button>
                            ))}
                        </div>
                    ))}
                </div>
            </AuthenticatedLayout>
        );
    },
});