interface WashiTapeProps {
  color?: "rose" | "amber" | "blue" | "green" | "purple" | "mint";
  text?: string;
  className?: string;
  rotate?: number;
}

const colors = {
  rose: "bg-rose-200 dark:bg-rose-900/60 text-rose-700 dark:text-rose-300",
  amber: "bg-amber-200 dark:bg-amber-900/60 text-amber-700 dark:text-amber-300",
  blue: "bg-blue-200 dark:bg-blue-900/60 text-blue-700 dark:text-blue-300",
  green: "bg-green-200 dark:bg-green-900/60 text-green-700 dark:text-green-300",
  purple: "bg-purple-200 dark:bg-purple-900/60 text-purple-700 dark:text-purple-300",
  mint: "bg-teal-100 dark:bg-teal-900/60 text-teal-700 dark:text-teal-300",
};

export function WashiTape({ color = "rose", text, className = "", rotate = -1 }: WashiTapeProps) {
  return (
    <div
      className={`inline-block px-4 py-0.5 text-xs font-medium tracking-wide opacity-90 ${colors[color]} ${className}`}
      style={{
        transform: `rotate(${rotate}deg)`,
        fontFamily: "var(--font-caveat, cursive)",
        fontSize: "0.875rem",
      }}
    >
      {text}
    </div>
  );
}
