import { useState } from "react";
import { FaCheckCircle } from "react-icons/fa";
import { Button, Events } from "../../index";

export default function Price1({ title, price, cents, toogle }: Price.Price1) {
    const [paidMode, setPaidMode] = useState<"yearly" | "monthly">("yearly");

    function changeDate() {
        if (paidMode === "monthly") {
            return setPaidMode("yearly");
        } else {
            return setPaidMode("monthly");
        }
    }

    return (
        <section className="m-auto">
            {title && <h2 className="text-center darkTitle my-4">{title}</h2>}
            <div className="text-center my-5">
                <Button.Toogle
                    label={toogle.label}
                    label2={toogle.label2}
                    onClick={changeDate}
                    className={toogle.className}
                    status={toogle.status}
                    labelClass={`text ${toogle.labelClass}`}
                />
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                {price.map((item) => (
                    <div
                        key={`key-price-${Events.Utils.slugify(item.title)}`}
                        className={`rounded w-full p-8 ${item.className} ${item.popular ? "shadow-blue-300 shadow-lg border-2 border-blue-200 darkAltContainer" : "shadow darkContainer"}`}
                    >
                        <div className="flex mb-2">
                            <h3 className="darkTitle my-auto">{item.title}</h3>
                            {item.popular && (
                                <div className="my-auto">
                                    <p
                                        className={`py-1 px-2 text-white rounded-full text-xs mx-2 font-bold dark:bg-amber-500 dark:shadow-amber-400 ${item.popular.className}`}
                                    >
                                        {item.popular.text}
                                    </p>
                                </div>
                            )}
                        </div>
                        <p className="text italic">{item.description}</p>
                        <div className="text-center my-3">
                            <Button.Button1
                                href={item.button.href}
                                name={item.button.name}
                                ariaLabel={item.button.ariaLabel}
                                id={item.button.id}
                                rel={item.button.rel || "tag"}
                                type={item.button.type || "button"}
                                target={item.button.target || "_self"}
                            />
                            {paidMode === "monthly" ? (
                                <p className="text">
                                    <span className="text-3xl font-medium titleColor darkTitle">
                                        ${item.amount.month}
                                    </span>
                                    {cents ? (
                                        <span className="titleColor font-medium darkTitle">
                                            .{cents.toString()}
                                        </span>
                                    ) : null}{" "}
                                    / mes
                                </p>
                            ) : (
                                <p className="text">
                                    <span className="text-3xl font-medium titleColor darkTitle">
                                        ${item.amount.year}
                                    </span>
                                    {cents ? (
                                        <span className="titleColor font-medium darkTitle">
                                            .{cents.toString()}
                                        </span>
                                    ) : null}{" "}
                                    / año
                                </p>
                            )}
                            <p className="text-left text-sm font-semibold text-gray-600 text my-5">
                                {item.note}
                            </p>
                        </div>
                        <hr className="my-5" />
                        <p className="text">
                            <b>Incluye:</b>
                        </p>
                        {item.benefits.map((point, index) => (
                            <div
                                className="flex my-6"
                                key={`key-benefit-${Events.Utils.slugify(item.title)}-${index.toString()}`}
                            >
                                <FaCheckCircle className="absolute my-1 w-[20px] h-[20px] text-green-700 dark:text-green-400" />
                                <p className="text my-auto px-7">{point}</p>
                            </div>
                        ))}
                    </div>
                ))}
            </div>
        </section>
    );
}