import { LucideIcon } from "lucide-react";
import { ComponentProps, FC, ReactNode } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";

type ChildrenProps = {
  children: ReactNode;
};

type ChildrenPropsWithClassName = ChildrenProps & {
  className?: ComponentProps<"div">["className"];
};

export const AnalyticsContainer: FC<ChildrenPropsWithClassName> = ({ className, children }) => {
  return (
    <div
      className={`bg-secondary dark:bg-secondary flex w-full divide-x overflow-hidden rounded-xl border ${className || ""}`}
    >
      {children}
    </div>
  );
};

type AnalyticsCardProps = {
  title: string;
  Icon?: LucideIcon;
  tooltip?: ReactNode;
  children: ReactNode;
};
export const AnalyticsCard = ({ title, Icon, children, tooltip }: AnalyticsCardProps) => {
  const component = (
    <Card className="hover:bg-secondary flex flex-1 flex-grow flex-col rounded-none p-4">
      <CardHeader className={"p-0"}>
        <CardTitle>
          <div className={"text-muted-foreground flex justify-between text-sm font-medium"}>
            {title}
            {Icon && <Icon size={20} className={"text-muted-foreground"} />}
          </div>
        </CardTitle>
      </CardHeader>
      <CardContent className={"mt-2 flex-grow p-0"}>{children}</CardContent>
    </Card>
  );

  return tooltip ? (
    <TooltipProvider delayDuration={350}>
      <Tooltip>
        <TooltipTrigger asChild>{component}</TooltipTrigger>
        <TooltipContent className="bg-secondary flex min-w-32 flex-col gap-1 p-4">{tooltip}</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  ) : (
    component
  );
};

export const AnalyticsMajorStat: FC<ChildrenPropsWithClassName> = ({ children, className }) => {
  return <p className={className || `text-xl font-medium`}>{children}</p>;
};

export const AnalyticsMinorStat: FC<ChildrenProps> = ({ children }) => {
  return (
    <p
      className={
        "text-muted-foreground [&>*:nth-child(1)]:text-primary-foreground flex items-center justify-between gap-2 text-xs [&>*:nth-child(1)]:font-bold"
      }
    >
      {children}
    </p>
  );
};
