import React from 'react';

type ElevationLevel = 'flat' | 'subtle' | 'standard' | 'prominent';

interface ClayCardProps {
  children: React.ReactNode;
  className?: string;
  onClick?: () => void;
  selected?: boolean;
  /**
   * Elevation level for visual hierarchy:
   * - flat: No shadow (nested content)
   * - subtle: Light shadow (section headers, secondary elements)
   * - standard: Medium shadow (main content cards) - default
   * - prominent: Strong shadow (emphasized content)
   */
  elevation?: ElevationLevel;
}

const elevationClasses: Record<ElevationLevel, string> = {
  flat: '',
  subtle: 'shadow-[3px_3px_6px_#c5c9d1,-3px_-3px_6px_#ffffff]',
  standard: 'shadow-[6px_6px_12px_#bfc3cc,-6px_-6px_12px_#ffffff]',
  prominent: 'shadow-[8px_8px_16px_#b8bcc5,-8px_-8px_16px_#ffffff]',
};

export const ClayCard: React.FC<ClayCardProps> = ({
  children,
  className = '',
  onClick,
  selected,
  elevation = 'standard'
}) => {
  const elevationClass = selected
    ? 'shadow-[inset_4px_4px_8px_rgba(0,0,0,0.05),inset_-4px_-4px_8px_rgba(255,255,255,0.8)]'
    : elevationClasses[elevation];

  return (
    <div
      onClick={onClick}
      className={`
        bg-background
        rounded-3xl
        p-6
        border-2
        ${selected ? 'border-indigo-500' : 'border-transparent'}
        ${elevationClass}
        transition-all
        duration-300
        ${onClick ? 'cursor-pointer hover:transform hover:-translate-y-1' : ''}
        ${className}
      `}
    >
      {children}
    </div>
  );
};