"use client";

import { HTMLAttributes, ReactNode } from "react";

interface CardProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode;
  variant?: "default" | "dark";
}

const variantClasses = {
  default: "border",
  dark: "border",
};

export default function Card({
  children,
  variant = "default",
  className = "",
  ...props
}: CardProps) {
  const variantStyles = {
    default: {
      backgroundColor: "var(--card)",
      borderColor: "var(--border)",
    },
    dark: {
      backgroundColor: "var(--card-hover)",
      borderColor: "var(--border)",
    },
  };

  return (
    <div
      className={`rounded-lg backdrop-blur-sm ${variantClasses[variant]} ${className}`}
      style={variantStyles[variant]}
      {...props}
    >
      {children}
    </div>
  );
}