---
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import Title from "../atoms/title";
import { cn } from "@/lib/utils";
import CheckCircleIcon from "@/components/atoms/check.circle.icon.astro";
import CallButton from "./CallButton";

const { title, price, description, features, isMostPopular, aos, color, page } =
    Astro.props;

const colors = {
    default: {
        border: "border-lime-500",
        textDarkest: "text-lime-900",
        textDark: "text-lime-700",
        bg: "bg-lime-50",
    },
    lime: {
        border: "border-lime-500",
        textDarkest: "text-lime-900",
        textDark: "text-lime-700",
        bg: "bg-lime-50",
    },
    blue: {
        border: "border-blue-900",
        textDarkest: "text-blue-900",
        textDark: "text-blue-700",
        bg: "bg-blue-50",
    },
    amber: {
        border: "border-amber-500",
        text: "text-amber-900",
    },
};

function getColoredStyle(type: keyof (typeof colors)["default"]) {
    // @ts-ignore
    return colors[color ?? "default"][type];
}
---

<Card
    className={cn(
        "w-full pt-8 px-4",
        isMostPopular
            ? "border-2 " + getColoredStyle("border")
            : "border border-gray-200",
    )}
    {...aos}
>
    <CardHeader className="relative text-start w-full space-y-4">
        <Title title={title} size="h3" />
        <p class="text-base md:text-lg font-medium">{description}</p>
        <div class="flex items-center gap-1">
            <Title title={`$${price}`} size="h2" />
            <span>/ month</span>
        </div>
    </CardHeader>
    <CardContent className="flex flex-col gap-6 w-full">
        {
            isMostPopular && (
                <div class="hidden absolute top-5 sm:grid place-items-center w-full right-0 left-0">
                    <span
                        class={cn(
                            "p-1 px-3 font-medium rounded-full whitespace-nowrap md:text-sm",
                            getColoredStyle("bg"),
                            getColoredStyle("textDark"),
                        )}
                    >
                        Most popular
                    </span>
                </div>
            )
        }
        <div class="w-full space-y-2">
            {
                features.map((feature: string[]) => (
                    <div class="flex items-center gap-2 text-start">
                        <CheckCircleIcon invert />
                        <span class="text-sm sm:text-base lg:text-sm xl:text-base">
                            {feature}
                        </span>
                    </div>
                ))
            }
        </div>

        <CallButton
            client:load
            fullWidth
            text="Get Started"
            variant={color
                ? isMostPopular
                    ? color
                    : "ghost"
                : isMostPopular
                  ? "brand"
                  : "muted"}
            page={page}
        />
    </CardContent>
</Card>
