use radix_yew_icons::RocketIcon;
use yew::prelude::*;

use crate::components::ui::alert::{Alert, AlertDescription, AlertTitle};

#[function_component]
pub fn AlertDemo() -> Html {
    html! {
        <Alert>
            <RocketIcon class="h-4 w-4" />
            <AlertTitle>{"Heads up!"}</AlertTitle>
            <AlertDescription>
                {"You can add components to your app using the cli."}
            </AlertDescription>
        </Alert>
    }
}

use radix_yew_icons::RocketIcon;
use yew::prelude::*;

use crate::components::ui::alert::{Alert, AlertDescription, AlertTitle};

#[function_component]
pub fn AlertDemo() -> Html {
    html! {
        <Alert>
            <RocketIcon class="h-4 w-4" />
            <AlertTitle>{"Heads up!"}</AlertTitle>
            <AlertDescription>
                {"You can add components to your app using the cli."}
            </AlertDescription>
        </Alert>
    }
}

use radix_yew_icons::ExclamationTriangleIcon;
use yew::prelude::*;

use crate::components::ui::alert::{Alert, AlertDescription, AlertTitle, AlertVariant};

#[function_component]
pub fn AlertDestructive() -> Html {
    html! {
        <Alert variant={AlertVariant::Destructive}>
            <ExclamationTriangleIcon class="h-4 w-4" />
            <AlertTitle>{"Error"}</AlertTitle>
            <AlertDescription>
                {"Your session has expired. Please log in again."}
            </AlertDescription>
        </Alert>
    }
}

use yew::prelude::*;

use crate::components::ui::aspect_ratio::AspectRatio;

#[function_component]
pub fn AspectRatioDemo() -> Html {
    html! {
        <AspectRatio ratio={16.0 / 9.0} class="bg-muted">
            <img
                src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
                alt="Photo by Drew Beamer"
                class="h-full w-full rounded-md object-cover"
            />
        </AspectRatio>
    }
}

use yew::prelude::*;

use crate::components::ui::avatar::{Avatar, AvatarFallback, AvatarImage};

#[function_component]
pub fn AvatarDemo() -> Html {
    html! {
        <Avatar>
            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
            <AvatarFallback>{"CN"}</AvatarFallback>
        </Avatar>
    }
}

use yew::prelude::*;

use crate::components::ui::badge::Badge;

#[function_component]
pub fn BadgeDemo() -> Html {
    html! {
        <Badge>{"Badge"}</Badge>
    }
}

use yew::prelude::*;

use crate::components::ui::badge::Badge;

#[function_component]
pub fn BadgeDemo() -> Html {
    html! {
        <Badge>{"Badge"}</Badge>
    }
}

use yew::prelude::*;

use crate::new_york::components::ui::badge::{Badge, BadgeVariant};

#[function_component]
pub fn BadgeSecondary() -> Html {
    html! {
        <Badge variant={BadgeVariant::Secondary}>{"Secondary"}</Badge>
    }
}

use yew::prelude::*;

use crate::new_york::components::ui::badge::{Badge, BadgeVariant};

#[function_component]
pub fn BadgeOutline() -> Html {
    html! {
        <Badge variant={BadgeVariant::Outline}>{"Outline"}</Badge>
    }
}

use yew::prelude::*;

use crate::new_york::components::ui::badge::{Badge, BadgeVariant};

#[function_component]
pub fn BadgeDestructive() -> Html {
    html! {
        <Badge variant={BadgeVariant::Destructive}>{"Destructive"}</Badge>
    }
}

use yew::prelude::*;

use crate::components::ui::breadcrumb::{
    Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage,
    BreadcrumbSeparator,
};

#[function_component]
pub fn BreadcrumbDemo() -> Html {
    html! {
        <Breadcrumb>
            <BreadcrumbList>
                <BreadcrumbItem>
                    <BreadcrumbLink href="#/">{"Home"}</BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                    // TODO
                    // <DropdownMenu>
                    //     <DropdownMenuTrigger class="flex items-center gap-1">
                    //         <BreadcrumbEllipsis class="h-4 w-4" />
                    //         <span class="sr-only">{"Toggle menu"}</span>
                    //     </DropdownMenuTrigger>
                    //     <DropdownMenuContent align="start">
                    //         <DropdownMenuItem>{"Documentation"}</DropdownMenuItem>
                    //         <DropdownMenuItem>{"Themes"}</DropdownMenuItem>
                    //         <DropdownMenuItem>{"GitHub"}</DropdownMenuItem>
                    //     </DropdownMenuContent>
                    // </DropdownMenu>
                    <BreadcrumbEllipsis class="h-4 w-4" />
                    <span class="sr-only">{"Toggle menu"}</span>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                    <BreadcrumbLink href="#/docs/components">{"Components"}</BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                    <BreadcrumbPage>{"Breadcrumb"}</BreadcrumbPage>
                </BreadcrumbItem>
            </BreadcrumbList>
        </Breadcrumb>
    }
}

use radix_yew_icons::SlashIcon;
use yew::prelude::*;

use crate::components::ui::breadcrumb::{
    Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,
};

#[function_component]
pub fn BreadcrumbSeparatorDemo() -> Html {
    html! {
        <Breadcrumb>
            <BreadcrumbList>
                <BreadcrumbItem>
                    <BreadcrumbLink href="#/">{"Home"}</BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator>
                    <SlashIcon />
                </BreadcrumbSeparator>
                <BreadcrumbItem>
                    <BreadcrumbLink href="#/components">{"Components"}</BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator>
                    <SlashIcon />
                </BreadcrumbSeparator>
                <BreadcrumbItem>
                    <BreadcrumbPage>{"Breadcrumb"}</BreadcrumbPage>
                </BreadcrumbItem>
            </BreadcrumbList>
        </Breadcrumb>
    }
}

use radix_yew_icons::{ChevronDownIcon, SlashIcon};
use yew::prelude::*;

use crate::components::ui::breadcrumb::{
    Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,
};

#[function_component]
pub fn BreadcrumbDropdown() -> Html {
    html! {
        <Breadcrumb>
            <BreadcrumbList>
                <BreadcrumbItem>
                    <BreadcrumbLink href="/">{"Home"}</BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator>
                    <SlashIcon />
                </BreadcrumbSeparator>
                <BreadcrumbItem>
                    // TODO
                    // <DropdownMenu>
                    //     <DropdownMenuTrigger class="flex items-center gap-1">
                    //         {"Components"}
                    //         <ChevronDown class="h-4 w-4" />
                    //     </DropdownMenuTrigger>
                    //     <DropdownMenuContent align="start">
                    //         <DropdownMenuItem>{"Documentation"}</DropdownMenuItem>
                    //         <DropdownMenuItem>{"Themes"}</DropdownMenuItem>
                    //         <DropdownMenuItem>{"GitHub"}</DropdownMenuItem>
                    //     </DropdownMenuContent>
                    // </DropdownMenu>
                    {"Components"}
                    <ChevronDownIcon class="h-4 w-4" />
                </BreadcrumbItem>
                <BreadcrumbSeparator>
                    <SlashIcon />
                </BreadcrumbSeparator>
                <BreadcrumbItem>
                    <BreadcrumbPage>{"Breadcrumb"}</BreadcrumbPage>
                </BreadcrumbItem>
            </BreadcrumbList>
        </Breadcrumb>
    }
}

use yew::prelude::*;
use yew_router::prelude::*;

use crate::components::ui::breadcrumb::{
    Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbLinkChildProps,
    BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,
};

#[derive(Clone, PartialEq, Routable)]
enum Route {
    #[at("/")]
    Home,
    #[at("/docs/components")]
    Components,
}

#[function_component]
pub fn BreadcrumbEllipsisDemo() -> Html {
    html! {
        <Breadcrumb>
            <BreadcrumbList>
                <BreadcrumbItem>
                    <BreadcrumbLink
                        as_child={Callback::from(|BreadcrumbLinkChildProps {class, ..}| html! {
                            <Link<Route> classes={classes!(class)} to={Route::Home}>{"Home"}</Link<Route>>
                        })}
                    />
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                    <BreadcrumbEllipsis />
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                    <BreadcrumbLink
                        as_child={Callback::from(|BreadcrumbLinkChildProps {class, ..}| html! {
                            <Link<Route> classes={classes!(class)} to={Route::Home}>{"Components"}</Link<Route>>
                        })}
                    />
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                    <BreadcrumbPage>{"Breadcrumb"}</BreadcrumbPage>
                </BreadcrumbItem>
            </BreadcrumbList>
        </Breadcrumb>
    }
}

use yew::prelude::*;
use yew_router::prelude::*;

use crate::components::ui::breadcrumb::{
    Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbLinkChildProps, BreadcrumbList,
    BreadcrumbPage, BreadcrumbSeparator,
};

#[derive(Clone, PartialEq, Routable)]
enum Route {
    #[at("/")]
    Home,
    #[at("/components")]
    Components,
}

#[function_component]
pub fn BreadcrumbLinkDemo() -> Html {
    html! {
        <Breadcrumb>
            <BreadcrumbList>
                <BreadcrumbItem>
                    <BreadcrumbLink
                        as_child={Callback::from(|BreadcrumbLinkChildProps {class, ..}| html! {
                            <Link<Route> classes={classes!(class)} to={Route::Home}>{"Home"}</Link<Route>>
                        })}
                    />
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                    <BreadcrumbLink
                        as_child={Callback::from(|BreadcrumbLinkChildProps {class, ..}| html! {
                            <Link<Route> classes={classes!(class)} to={Route::Home}>{"Components"}</Link<Route>>
                        })}
                    />
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                    <BreadcrumbPage>{"Breadcrumb"}</BreadcrumbPage>
                </BreadcrumbItem>
            </BreadcrumbList>
        </Breadcrumb>
    }
}

use yew::prelude::*;

// use crate::default::components::ui::breadcrumb::{
//     Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage,
//     BreadcrumbSeparator,
// };

#[function_component]
pub fn BreadcrumbResponsive() -> Html {
    html! {
        // TODO
    }
}

use yew::prelude::*;

use crate::components::ui::button::Button;

#[function_component]
pub fn ButtonDemo() -> Html {
    html! {
        <Button>{"Button"}</Button>
    }
}

use yew::prelude::*;

use crate::components::ui::button::Button;

#[function_component]
pub fn ButtonDemo() -> Html {
    html! {
        <Button>{"Button"}</Button>
    }
}

use yew::prelude::*;

use crate::new_york::components::ui::button::{Button, ButtonVariant};

#[function_component]
pub fn ButtonSecondary() -> Html {
    html! {
        <Button variant={ButtonVariant::Secondary}>{"Secondary"}</Button>
    }
}

use yew::prelude::*;

use crate::new_york::components::ui::button::{Button, ButtonVariant};

#[function_component]
pub fn ButtonDestructive() -> Html {
    html! {
        <Button variant={ButtonVariant::Destructive}>{"Destructive"}</Button>
    }
}

use yew::prelude::*;

use crate::new_york::components::ui::button::{Button, ButtonVariant};

#[function_component]
pub fn ButtonOutline() -> Html {
    html! {
        <Button variant={ButtonVariant::Outline}>{"Outline"}</Button>
    }
}

use yew::prelude::*;

use crate::new_york::components::ui::button::{Button, ButtonVariant};

#[function_component]
pub fn ButtonGhost() -> Html {
    html! {
        <Button variant={ButtonVariant::Ghost}>{"Ghost"}</Button>
    }
}

use yew::prelude::*;

use crate::new_york::components::ui::button::{Button, ButtonVariant};

#[function_component]
pub fn ButtonLink() -> Html {
    html! {
        <Button variant={ButtonVariant::Link}>{"Link"}</Button>
    }
}

use radix_yew_icons::ChevronRightIcon;
use yew::prelude::*;

use crate::new_york::components::ui::button::{Button, ButtonSize, ButtonVariant};

#[function_component]
pub fn ButtonIcon() -> Html {
    html! {
        <Button variant={ButtonVariant::Outline} size={ButtonSize::Icon}>
            <ChevronRightIcon class="h-4 w-4" />
        </Button>
    }
}

use radix_yew_icons::EnvelopeOpenIcon;
use yew::prelude::*;

use crate::new_york::components::ui::button::Button;

#[function_component]
pub fn ButtonWithIcon() -> Html {
    html! {
        <Button>
            <EnvelopeOpenIcon />
            {"Login with Email"}
        </Button>
    }
}

use radix_yew_icons::ReloadIcon;
use yew::prelude::*;

use crate::new_york::components::ui::button::Button;

#[function_component]
pub fn ButtonLoading() -> Html {
    html! {
        <Button disabled=true>
            <ReloadIcon class="mr-2 h-4 w-4 animate-spin" />
            {"Please wait"}
        </Button>
    }
}

use yew::prelude::*;

use crate::new_york::components::ui::button::{Button, ButtonChildProps};

#[function_component]
pub fn ButtonAsChild() -> Html {
    html! {
        <Button
            as_child={Callback::from(|ButtonChildProps {class, ..}| html! {
                <a class={class} href="#/login">{"Login"}</a>
            })}
        />
    }
}

use yew::prelude::*;

use crate::components::ui::{
    button::{Button, ButtonVariant},
    card::{Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle},
    input::Input,
    label::Label,
};

#[function_component]
pub fn CardWithForm() -> Html {
    html! {
        <Card class="w-[350px]">
            <CardHeader>
                <CardTitle>{"Create project"}</CardTitle>
                <CardDescription>{"Deploy your new project in one-click."}</CardDescription>
            </CardHeader>
            <CardContent>
                <form>
                    <div class="grid w-full items-center gap-4">
                        <div class="flex flex-col space-y-1.5">
                            <Label r#for="name">{"Name"}</Label>
                            <Input id="name" placeholder="Name of your project" />
                        </div>
                        <div class="flex flex-col space-y-1.5">
                            <Label r#for="framework">{"Framework"}</Label>
                            // TODO
                            // <Select>
                            //     <SelectTrigger id="framework">
                            //         <SelectValue placeholder="Select" />
                            //     </SelectTrigger>
                            //     <SelectContent position="popper">
                            //         <SelectItem value="next">{"Next.js"}</SelectItem>
                            //         <SelectItem value="sveltekit">{"SvelteKit"}</SelectItem>
                            //         <SelectItem value="astro">{"Astro"}</SelectItem>
                            //         <SelectItem value="nuxt">{"Nuxt.js"}</SelectItem>
                            //     </SelectContent>
                            // </Select>
                        </div>
                    </div>
                </form>
            </CardContent>
            <CardFooter class="flex justify-between">
                <Button variant={ButtonVariant::Outline}>{"Cancel"}</Button>
                <Button>{"Deploy"}</Button>
            </CardFooter>
        </Card>
    }
}

use radix_yew_icons::{BellIcon, CheckIcon};
use yew::prelude::*;

use crate::components::ui::{
    button::Button,
    card::{Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle},
    switch::Switch,
};

struct Notification {
    title: &'static str,
    description: &'static str,
}

fn notifications() -> Vec<Notification> {
    vec![
        Notification {
            title: "Your call has been confirmed.",
            description: "1 hour ago",
        },
        Notification {
            title: "You have a new message!",
            description: "1 hour ago",
        },
        Notification {
            title: "Your subscription is expiring soon!",
            description: "2 hours ago",
        },
    ]
}

#[function_component]
pub fn CardDemo() -> Html {
    html! {
        <Card class="w-[380px]">
            <CardHeader>
                <CardTitle>{"Notifications"}</CardTitle>
                <CardDescription>{"You have 3 unread messages."}</CardDescription>
            </CardHeader>
            <CardContent class="grid gap-4">
                <div class=" flex items-center space-x-4 rounded-md border p-4">
                    <BellIcon />
                    <div class="flex-1 space-y-1">
                        <p class="text-sm font-medium leading-none">
                            {"Push Notifications"}
                        </p>
                        <p class="text-sm text-muted-foreground">
                            {"Send notifications to device."}
                        </p>
                    </div>
                    <Switch />
                </div>
                <div>
                    {notifications().iter().enumerate().map(|(index, notification)| html! {
                        <div
                            key={index}
                            class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
                        >
                            <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
                            <div class="space-y-1">
                                <p class="text-sm font-medium leading-none">
                                    {notification.title}
                                </p>
                                <p class="text-sm text-muted-foreground">
                                    {notification.description}
                                </p>
                            </div>
                        </div>
                    }).collect::<Html>()}
                </div>
            </CardContent>
            <CardFooter>
                <Button class="w-full">
                    <CheckIcon />{" Mark all as read"}
                </Button>
            </CardFooter>
        </Card>
    }
}

use yew::prelude::*;

use crate::components::ui::input::Input;

#[function_component]
pub fn InputDemo() -> Html {
    html! {
        <Input r#type="email" placeholder="Email" />
    }
}

use yew::prelude::*;

use crate::components::ui::input::Input;

#[function_component]
pub fn InputDemo() -> Html {
    html! {
        <Input r#type="email" placeholder="Email" />
    }
}

use yew::prelude::*;

use crate::components::ui::{input::Input, label::Label};

#[function_component]
pub fn InputFile() -> Html {
    html! {
        <div class="grid w-full max-w-sm items-center gap-1.5">
            <Label r#for="picture">{"Picture"}</Label>
            <Input id="picture" r#type="file" />
        </div>
    }
}

use yew::prelude::*;

use crate::components::ui::input::Input;

#[function_component]
pub fn InputDisabled() -> Html {
    html! {
        <Input disabled=true r#type="email" placeholder="Email" />
    }
}

use yew::prelude::*;

use crate::components::ui::{input::Input, label::Label};

#[function_component]
pub fn InputWithLabel() -> Html {
    html! {
        <div class="grid w-full max-w-sm items-center gap-1.5">
            <Label r#for="email">{"Email"}</Label>
            <Input r#type="email" id="email" placeholder="Email" />
        </div>
    }
}

use yew::prelude::*;

use crate::components::ui::{input::Input, label::Label};

#[function_component]
pub fn InputWithText() -> Html {
    html! {
        <div class="grid w-full max-w-sm items-center gap-1.5">
            <Label r#for="email-2">{"Email"}</Label>
            <Input r#type="email" id="email-2" placeholder="Email" />
            <p class="text-sm text-muted-foreground">{"Enter your email address."}</p>
        </div>
    }
}

use yew::prelude::*;

use crate::components::ui::{button::Button, input::Input};

#[function_component]
pub fn InputWithButton() -> Html {
    html! {
        <div class="flex w-full max-w-sm items-center space-x-2">
            <Input r#type="email" placeholder="Email" />
            <Button r#type="submit">{"Subscribe"}</Button>
        </div>
    }
}

use yew::prelude::*;

// use crate::components::ui::input::Input;

#[function_component]
pub fn InputForm() -> Html {
    html! {
        // TODO
    }
}

use yew::prelude::*;

use crate::components::ui::label::Label;

#[function_component]
pub fn LabelDemo() -> Html {
    html! {
        <div>
            <div class="flex items-center space-x-2">
                // TODO
                // <Checkbox id="terms" />
                <Label r#for="terms">{"Accept terms and conditions"}</Label>
            </div>
        </div>
    }
}

use yew::prelude::*;

use crate::components::ui::pagination::{
    Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink,
    PaginationNext, PaginationPrevious,
};

#[function_component]
pub fn PaginationDemo() -> Html {
    html! {
        <Pagination>
            <PaginationContent>
                <PaginationItem>
                    <PaginationPrevious href="#" />
                </PaginationItem>
                <PaginationItem>
                    <PaginationLink href="#">{"1"}</PaginationLink>
                </PaginationItem>
                <PaginationItem>
                    <PaginationLink href="#" is_active=true>
                    {"2"}
                    </PaginationLink>
                </PaginationItem>
                <PaginationItem>
                    <PaginationLink href="#">{"3"}</PaginationLink>
                </PaginationItem>
                <PaginationItem>
                    <PaginationEllipsis />
                </PaginationItem>
                <PaginationItem>
                    <PaginationNext href="#" />
                </PaginationItem>
            </PaginationContent>
        </Pagination>
    }
}

use yew::prelude::*;

use crate::components::ui::separator::{Orientation, Separator};

#[function_component]
pub fn SeparatorDemo() -> Html {
    html! {
        <div>
            <div class="space-y-1">
                <h4 class="text-sm font-medium leading-none">{"Radix Primitives"}</h4>
                <p class="text-sm text-muted-foreground">
                    {"An open-source UI component library."}
                </p>
            </div>
            <Separator class="my-4" />
            <div class="flex h-5 items-center space-x-4 text-sm">
                <div>{"Blog"}</div>
                <Separator orientation={Orientation::Vertical} />
                <div>{"Docs"}</div>
                <Separator orientation={Orientation::Vertical} />
                <div>{"Source"}</div>
            </div>
        </div>
    }
}

use yew::prelude::*;

use crate::components::ui::skeleton::Skeleton;

#[function_component]
pub fn SkeletonDemo() -> Html {
    html! {
        <div class="flex items-center space-x-4">
            <Skeleton class="h-12 w-12 rounded-full" />
            <div class="space-y-2">
                <Skeleton class="h-4 w-[250px]" />
                <Skeleton class="h-4 w-[200px]" />
            </div>
        </div>
    }
}

use yew::prelude::*;

use crate::components::ui::skeleton::Skeleton;

#[function_component]
pub fn SkeletonCard() -> Html {
    html! {
        <div class="flex flex-col space-y-3">
            <Skeleton class="h-[125px] w-[250px] rounded-xl" />
            <div class="space-y-2">
                <Skeleton class="h-4 w-[250px]" />
                <Skeleton class="h-4 w-[200px]" />
            </div>
        </div>
    }
}

use yew::prelude::*;

use crate::components::ui::{label::Label, switch::Switch};

#[function_component]
pub fn SwitchDemo() -> Html {
    html! {
        <div class="flex items-center space-x-2">
            <Switch id="airplane-mode" />
            <Label r#for="airplane-mode">{"Airplane Mode"}</Label>
        </div>
    }
}

use yew::prelude::*;

// use crate::default::components::ui::switch::Switch;

#[function_component]
pub fn SwitchForm() -> Html {
    html! {
        // TODO
    }
}

use yew::prelude::*;

use crate::components::ui::table::{
    Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow,
};

struct Invoice {
    invoice: &'static str,
    payment_status: &'static str,
    total_amount: &'static str,
    payment_method: &'static str,
}

fn invoices() -> Vec<Invoice> {
    vec![
        Invoice {
            invoice: "INV001",
            payment_status: "Paid",
            total_amount: "$250.00",
            payment_method: "Credit Card",
        },
        Invoice {
            invoice: "INV002",
            payment_status: "Pending",
            total_amount: "$150.00",
            payment_method: "PayPal",
        },
        Invoice {
            invoice: "INV003",
            payment_status: "Unpaid",
            total_amount: "$350.00",
            payment_method: "Bank Transfer",
        },
        Invoice {
            invoice: "INV004",
            payment_status: "Paid",
            total_amount: "$450.00",
            payment_method: "Credit Card",
        },
        Invoice {
            invoice: "INV005",
            payment_status: "Paid",
            total_amount: "$550.00",
            payment_method: "PayPal",
        },
        Invoice {
            invoice: "INV006",
            payment_status: "Pending",
            total_amount: "$200.00",
            payment_method: "Bank Transfer",
        },
        Invoice {
            invoice: "INV007",
            payment_status: "Unpaid",
            total_amount: "$300.00",
            payment_method: "Credit Card",
        },
    ]
}

#[function_component]
pub fn TableDemo() -> Html {
    html! {
        <Table>
            <TableCaption>{"A list of your recent invoices."}</TableCaption>
            <TableHeader>
                <TableRow>
                    <TableHead class="w-[100px]">{"Invoice"}</TableHead>
                    <TableHead>{"Status"}</TableHead>
                    <TableHead>{"Method"}</TableHead>
                    <TableHead class="text-right">{"Amount"}</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                {invoices().into_iter().map(|invoice| html! {
                    <TableRow key={invoice.invoice}>
                        <TableCell class="font-medium">{invoice.invoice}</TableCell>
                        <TableCell>{invoice.payment_status}</TableCell>
                        <TableCell>{invoice.payment_method}</TableCell>
                        <TableCell class="text-right">{invoice.total_amount}</TableCell>
                    </TableRow>
                }).collect::<Html>()}
            </TableBody>
            <TableFooter>
                <TableRow>
                    <TableCell colspan="3">{"Total"}</TableCell>
                    <TableCell class="text-right">{"$2,500.00"}</TableCell>
                </TableRow>
            </TableFooter>
        </Table>
    }
}

use yew::prelude::*;

use crate::components::ui::textarea::Textarea;

#[function_component]
pub fn TextareaDemo() -> Html {
    html! {
        <Textarea placeholder="Type your message here." />
    }
}

use yew::prelude::*;

use crate::components::ui::textarea::Textarea;

#[function_component]
pub fn TextareaDemo() -> Html {
    html! {
        <Textarea placeholder="Type your message here." />
    }
}

use yew::prelude::*;

use crate::components::ui::textarea::Textarea;

#[function_component]
pub fn TextareaDisabled() -> Html {
    html! {
        <Textarea placeholder="Type your message here." disabled=true />
    }
}

use yew::prelude::*;

use crate::components::ui::{label::Label, textarea::Textarea};

#[function_component]
pub fn TextareaWithLabel() -> Html {
    html! {
        <div class="grid w-full gap-1.5">
            <Label r#for="message">{"Your message"}</Label>
            <Textarea placeholder="Type your message here." id="message" />
        </div>
    }
}

use yew::prelude::*;

use crate::components::ui::{label::Label, textarea::Textarea};

#[function_component]
pub fn TextareaWithText() -> Html {
    html! {
        <div class="grid w-full gap-1.5">
            <Label r#for="message-2">{"Your Message"}</Label>
            <Textarea placeholder="Type your message here." id="message-2" />
            <p class="text-sm text-muted-foreground">
                {"Your message will be copied to the support team."}
            </p>
        </div>
    }
}

use yew::prelude::*;

use crate::components::ui::{button::Button, textarea::Textarea};

#[function_component]
pub fn TextareaWithButton() -> Html {
    html! {
        <div class="grid w-full gap-2">
            <Textarea placeholder="Type your message here." />
            <Button>{"Send message"}</Button>
        </div>
    }
}

use yew::prelude::*;

// use crate::components::ui::textarea::Textarea;

#[function_component]
pub fn TextareaForm() -> Html {
    html! {
        // TODO
    }
}