import type { ReactNode, HTMLAttributes } from "react";

interface CardProps extends HTMLAttributes<HTMLDivElement> {
  className?: string;
  children: ReactNode;
  onClick?: () => void;
}

export function Card({ className = "", children, onClick, ...rest }: CardProps) {
  return (
    <div
      onClick={onClick}
      className={`
        bg-zinc-900 border border-zinc-700/50 rounded-xl
        ${onClick ? "hover:bg-zinc-800/50 cursor-pointer transition-colors duration-150" : ""}
        ${className}
      `}
      {...rest}
    >
      {children}
    </div>
  );
}