import { type ReactNode } from 'react';

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

export function GlassAppleCard({
  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(--glass-bg)] border border-[var(--glass-border)] backdrop-blur-xl
        shadow-[var(--shadow-md),var(--glass-inset)]
        transition-[transform,background-color,border-color] duration-[var(--dur-fast)]
        ${onClick ? 'hover:bg-[var(--glass-highlight)] hover:border-[rgba(29,31,38,0.14)] hover:-translate-y-0.5 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>
  );
}