import { ReactNode } from "react";

interface CardProps {
  children?: ReactNode;
  className?: string;
}

const Card = ({ children }: CardProps) => {
  return (
    <div
      className="dark:from-black/10 dark:to-black/5 dark:border-white/[6%] px-4 pt-3 pb-4 flex flex-col gap-2 border w-full rounded-lg bg-gradient-to-br from-white/80 to-white/70 border-black/[6%]"
      data-tauri-drag-region
    >
      {children}
    </div>
  );
};

const CardHeader = ({ children }: CardProps) => {
  return (
    <div className="flex items-center gap-2.5 tracking-wide">{children}</div>
  );
};

const CardIcon = ({ children }: CardProps) => {
  return (
    <div className="flex gap-1.5 items-center font-semibold">{children}</div>
  );
};

const CardTool = ({ children }: CardProps) => {
  return (
    <div className="flex items-center justify-end flex-grow gap-2">
      {children}
    </div>
  );
};

const CardBody = ({ children }: CardProps) => {
  return <div className="w-full h-full text-sm tracking-wide text-zinc-800">{children}</div>;
};

export { Card, CardHeader, CardIcon, CardTool, CardBody };