use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn CardExample() -> impl IntoView {
    view! {
        <Card class="max-w-sm">
            <CardHeader>
                <CardTitle>"Log in to your account"</CardTitle>
                <CardDescription>
                    "Enter your email below to Log in to your account"
                </CardDescription>
                <CardAction>
                    <Button variant="link">"Sign Up"</Button>
                </CardAction>
            </CardHeader>
            <CardContent>
                <FieldSet>
                    <Field>
                        <Input input_type="email" placeholder="m@example.com">
                            "Email"
                        </Input>
                    </Field>
                    <Field>
                        <div class="flex">
                            <FieldLabel>"Password"</FieldLabel>
                            <Link
                                href="#"
                                class="ml-auto text-sm font-normal no-underline hover:underline"
                            >
                                "Forgot your password?"
                            </Link>
                        </div>
                        <Input input_type="password" />
                    </Field>
                </FieldSet>
            </CardContent>
            <CardFooter class="flex-col gap-2 border-t">
                <Button class="w-full">"Log in"</Button>
                <Button variant="outline" class="w-full">
                    "Log in with Google"
                </Button>
            </CardFooter>
        </Card>
    }
}

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn CardSizeExample() -> impl IntoView {
    view! {
        <Card size="sm" class="max-w-sm">
            <CardHeader>
                <CardTitle>"Small Card"</CardTitle>
                <CardDescription>"This card uses the small size variant."</CardDescription>
            </CardHeader>
            <CardContent>
                <p>
                    "The card component supports a size prop that can be set to
                    \"sm\" for a more compact appearance."
                </p>
            </CardContent>
            <CardFooter>
                <Button variant="outline" size="sm" class="w-full">
                    "Action"
                </Button>
            </CardFooter>
        </Card>
    }
}

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn CardImageExample() -> impl IntoView {
    let theme_provider = expect_context::<ThemeProviderContext>();

    view! {
        <Card class="relative max-w-sm">
            <img
                src="https://avatar.vercel.sh/shadcn1"
                alt="Event cover"
                class=move || {
                    format!(
                        "aspect-video w-full object-cover grayscale {}",
                        match theme_provider.mode.get() {
                            Mode::Auto => "brightness-60 dark:brightness-40",
                            Mode::Dark => "brightness-40",
                            _ => "brightness-60",
                        },
                    )
                }
            />
            <div class="absolute inset-0 aspect-video bg-black/35" />
            <CardHeader>
                <CardAction>
                    <Badge variant="secondary">"Featured"</Badge>
                </CardAction>
                <CardTitle>"Design systems meetup"</CardTitle>
                <CardDescription>
                    "A practical talk on component APIs, accessibility, and shipping
                    faster."
                </CardDescription>
            </CardHeader>
            <CardFooter>
                <Button class="w-full">"View Event"</Button>
            </CardFooter>
        </Card>
    }
}