import { type ReactNode } from 'react';

interface Props {
  title?: string;
  subtitle?: string;
  children?: ReactNode;
  onClick?: () => void;
  className?: string;
}

/**
 * 拟态卡片：与玻璃、极简卡片同一份 props，
 * 同色浮起（一组外双阴影），没有边框与模糊；hover 只提亮表面，不再抬高。
 */
export function NeumorphicCard({
  title,
  subtitle,
  children,
  onClick,
  className = '',
}: Props) {
  const hasHeader = title || subtitle;

  return (
    <article
      onClick={onClick}
      role={onClick ? 'button' : undefined}
      tabIndex={onClick ? 0 : undefined}
      onKeyDown={onClick ? (event) => {
        if (event.key === 'Enter' || event.key === ' ') {
          event.preventDefault();
          onClick();
        }
      } : undefined}
      className={`
        relative
        rounded-2xl
        bg-[var(--neuro-bg)]
        shadow-[var(--neuro-shadow)]
        transition-[background-color] duration-[var(--dur-fast)]
        ${onClick ? 'hover:bg-[var(--neuro-light)] cursor-pointer' : ''}
        p-6
        ${className}
      `}
    >
      {hasHeader && (
        <div className="mb-4">
          {title && (
            <h3
              className="text-base"
              style={{ fontWeight: 'var(--fw-semibold)' }}
            >
              {title}
            </h3>
          )}
          {subtitle && (
            <p className="text-sm text-[var(--color-text-muted)] mt-1">{subtitle}</p>
          )}
        </div>
      )}

      {children}
    </article>
  );
}