import { ReactNode } from "react";

interface EmbossedPanelProps {
  children: ReactNode;
  className?: string;
}

export function EmbossedPanel({ children, className = "" }: EmbossedPanelProps) {
  return (
    <div className={`relative ${className}`}>
      {/* SVG filters for embossed texture */}
      <svg className="absolute w-0 h-0">
        <defs>
          {/* Organic noise texture */}
          <filter id="emboss-texture" x="0%" y="0%" width="100%" height="100%">
            <feTurbulence
              type="fractalNoise"
              baseFrequency="0.02 0.015"
              numOctaves="3"
              result="turbulence"
              seed="2"
            />
            <feDisplacementMap
              in="SourceGraphic"
              in2="turbulence"
              scale="3"
              xChannelSelector="R"
              yChannelSelector="G"
              result="displacement"
            />
            <feGaussianBlur stdDeviation="0.5" result="blur" />
          </filter>
        </defs>
      </svg>

      {/* Main panel container */}
      <div
        className="relative overflow-hidden"
        style={{
          borderRadius: "2rem",
          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04)",
          border: "2px solid transparent",
          backgroundImage: `
            linear-gradient(180deg, rgba(62, 121, 131, 0.8) 0%, rgba(32, 76, 106, 0.8) 100%),
            linear-gradient(180deg, rgba(138, 206, 224, 0.8) 0%, rgba(20, 40, 60, 0.8) 100%)
          `,
          backgroundOrigin: "border-box",
          backgroundClip: "padding-box, border-box",
        }}
      >
        {/* Base gradient layer - matching nugget reference */}
        <div
          className="absolute inset-0"
          style={{
            background: "linear-gradient(180deg, rgba(62, 121, 131, 0.8) 0%, rgba(32, 76, 106, 0.8) 100%)",
          }}
        />

        {/* Embossed texture layer - extremely subtle */}
        <div
          className="absolute inset-0 opacity-5"
          style={{
            background: "linear-gradient(180deg, #4a8a95 0%, #2a5c7a 100%)",
            filter: "url(#emboss-texture)",
          }}
        />

        {/* Content container */}
        <div className="relative z-10">{children}</div>
      </div>
    </div>
  );
}