import { cn } from "~/lib/utils";
import { Card, CardContent, CardHeader, CardTitle } from "./card";

interface BaseCardProps {
  title?: string;
  className?: string;
  headerClassName?: string;
  contentClassName?: string;
  children: React.ReactNode;
  icon?: React.ComponentType<{ className?: string }>;
  withHeader?: boolean;
}

export function BaseCard({
  title,
  className,
  headerClassName,
  contentClassName,
  children,
  withHeader = false,
  icon: Icon,
}: BaseCardProps) {
  return (
    <Card
      className={cn(
        "bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm py-2 pb-0 grid items-center",
        className
      )}
    >
      {Icon && title ? (
        <CardHeader
          className={cn(
            "border-b-2 border-gray-500/20 py-2 px-0 pb-4",
            headerClassName
          )}
        >
          <CardTitle className="text-white text-sm text-right font-persian px-4 my-auto items-center flex w-full justify-between">
            {title} {<Icon />}{" "}
          </CardTitle>
        </CardHeader>
      ) : withHeader && title ? (
        <CardHeader
          className={cn("pb-2 border-b-2 border-gray-500/20", headerClassName)}
        >
          <CardTitle className="text-white text-sm text-right font-persian px-4">
            {title}
          </CardTitle>
        </CardHeader>
      ) : title ? (
        <div className="border-b-2 border-gray-500/20 pb-2">
          <h3 className="text-sm font-bold text-white text-right font-persian px-4">
            {title}
          </h3>
        </div>
      ) : null}
      <CardContent className={cn("py-2 px-4 ", contentClassName)}>
        {children}
      </CardContent>
    </Card>
  );
}