import Link from "next/link";
import {LucideIcon} from "lucide-react";


type DashboardCardPropsType = {
    link: string | null;
    title: string;
    icon: LucideIcon | React.ElementType;
    description: string;
    cardInformation: string | number | null;
}

export function ClickableDashboardCard(props: DashboardCardPropsType) {
    return (
        <div className={"relative"}>
            <svg className="absolute top-1/3 left-0 text-green-600">
                <path className="cls-1" fill="currentColor" d="M0,0h0C3.65,0,6.62,2.97,6.62,6.62v36.76C6.62,47.03,3.65,50,0,50h0V0h0Z"/>
            </svg>

            <Link href={props.link || "/"}
                  className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">

                <div className={"flex flex-row justify-between items-center mb-2 text-green-900 dark:text-white"}>
                    <div className={"flex flex-col gap-y-1"}>
                        <h5 className="text-lg md:text-xl font-bold tracking-tight">
                            {props.cardInformation}
                        </h5>

                        <h5 className="text-base md:text-lg font-bold tracking-tight">
                            {props.title}
                        </h5>
                    </div>

                    {<props.icon size={36}/>}
                </div>
                <p className="font-normal text-xs md:text-sm text-gray-700 dark:text-gray-400">
                    {props.description}
                </p>
            </Link>
        </div>
    )
}


export function DashboardCard(props: DashboardCardPropsType) {
    return (
        <div
            className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">

            <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology
                acquisitions 2021</h5>
            <p className="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology
                acquisitions of 2021 so far, in reverse chronological order.</p>
        </div>
    )
}