<script lang="ts">
    import Icon from "$lib/components/atoms/icon.svelte";
    import MaxWidthWrapper from "$lib/components/molecules/max-width-wrapper.svelte";
    import { Button } from "$lib/components/ui/button";
    import * as Card from "$lib/components/ui/card";
    import { Input } from "$lib/components/ui/input";
    import { mainNavTree } from "$lib/core/constants";
    import { breadcrumbs } from "$lib/global.stores";
    import { Plus, RefreshCw, Search } from "@lucide/svelte";
    import { toast } from "svelte-sonner";

    breadcrumbs.set([mainNavTree[1]]);
</script>

<MaxWidthWrapper cls="">
    <Card.Root>
        <Card.Content>
            <div class="flex items-center justify-between gap-2">
                <Card.Title>Users</Card.Title>
                <div class="flex items-center gap-2">
                    <Button
                        variant="outline"
                        size="sm"
                        onclick={() => {
                            toast("Refreshing users...", {
                                description: "simulating API call",
                            });
                        }}
                    >
                        <Icon icon={RefreshCw} cls="h-4 w-auto" />
                        Refresh
                    </Button>
                    <Button
                        onclick={() => {
                            toast("Creating user...", {
                                description: "simulating API call",
                            });
                        }}
                        size="sm"
                    >
                        <Icon icon={Plus} cls="h-4 w-auto" />
                        Create User
                    </Button>
                </div>
            </div>

            <div class="mt-4 grid grid-cols-1 gap-3 md:grid-cols-3">
                <!-- Search -->
                <div class="relative">
                    <Icon
                        icon={Search}
                        cls="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
                    />
                    <Input
                        class="pl-10"
                        placeholder="Search by email, name, or username..."
                        oninput={(event) => {
                            toast.info("Searching...", {
                                description: "simulating API call",
                            });
                        }}
                    />
                </div>
            </div>

            <div class="grid place-items-center p-8 py-32">
                <span class="text-xl font-semibold">
                    Not Active At The Moment
                </span>
            </div>
        </Card.Content>
    </Card.Root>
</MaxWidthWrapper>
