import { ReactNode } from "react";

interface RibbonProps {
  children: ReactNode;
  text: string;
  variant?: "rounded" | "filled" | "corner";
  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
  color?: "primary" | "success" | "error" | "warning";
  className?: string;
}

export const Ribbon: React.FC<RibbonProps> = ({
  children,
  text,
  variant = "rounded",
  position = "top-left",
  color = "primary",
  className = "",
}) => {
  const colorClasses = {
    primary: "bg-brand-500",
    success: "bg-success-500",
    error: "bg-error-500",
    warning: "bg-warning-500",
  };

  const ribbonContent = () => {
    if (variant === "rounded") {
      return (
        <span
          className={`absolute -left-px mt-3 inline-block rounded-r-full ${colorClasses[color]} px-4 py-1.5 text-sm font-medium text-white`}
        >
          {text}
        </span>
      );
    }

    if (variant === "filled") {
      return (
        <span
          className={`absolute -left-9 -top-7 mt-3 flex h-14 w-24 -rotate-45 items-end justify-center ${colorClasses[color]} px-4 py-1.5 text-sm font-medium text-white shadow-theme-xs`}
        >
          {text}
        </span>
      );
    }

    // corner variant - using border colors matching the ribbon color
    const borderColorClass = {
      primary: "before:border-l-brand-500 before:border-t-brand-500 after:border-b-brand-500 after:border-l-brand-500",
      success: "before:border-l-success-500 before:border-t-success-500 after:border-b-success-500 after:border-l-success-500",
      error: "before:border-l-error-500 before:border-t-error-500 after:border-b-error-500 after:border-l-error-500",
      warning: "before:border-l-warning-500 before:border-t-warning-500 after:border-b-warning-500 after:border-l-warning-500",
    };
    
    return (
      <span
        className={`absolute -left-px mt-3 inline-block ${colorClasses[color]} px-4 py-1.5 text-sm font-medium text-white before:absolute before:-right-4 before:top-0 before:border-[13px] before:border-transparent before:content-[''] after:absolute after:-right-4 after:bottom-0 after:border-[13px] after:border-transparent after:content-[''] ${borderColorClass[color]}`}
      >
        {text}
      </span>
    );
  };

  return (
    <div className={`relative overflow-hidden ${className}`}>
      {ribbonContent()}
      {children}
    </div>
  );
};

