"use client";

import { HTMLAttributes, forwardRef } from "react";
import { COLOR_MAP, type PopColor } from "./theme";

interface Props extends HTMLAttributes<HTMLDivElement> {
  selected?: boolean;
  color?: PopColor;
  interactive?: boolean;
}

const BASE =
  "w-full min-h-[180px] rounded-2xl bg-white border shadow-sm p-4 flex flex-col transition-all";

const PopCard = forwardRef<HTMLDivElement, Props>(
  (
    { selected = false, color = "blue", interactive = true, className, ...rest },
    ref
  ) => {
    const tokens = COLOR_MAP[color];

    const classes = [
      BASE,
      selected ? tokens.border : "border-gray-200",
      interactive ? "hover:shadow-md hover:border-gray-300 cursor-pointer" : "",
      selected ? tokens.ringSelected : "",
      className,
    ]
      .filter(Boolean)
      .join(" ");

    return <div ref={ref} className={classes} {...rest} />;
  }
);

PopCard.displayName = "PopCard";

export default PopCard;
