import { forwardRef, type HTMLAttributes } from 'react';

import { cn } from '@/utils/classNames';

export interface PanelProps extends HTMLAttributes<HTMLDivElement> {
  readonly variant?: 'glass' | 'solid' | 'elevated';
  readonly padding?: 'none' | 'sm' | 'md' | 'lg';
}

const variantClasses = {
  glass: 'glass-panel',
  solid: 'border border-border/70 bg-panel',
  elevated: 'elevated-panel'
} as const;

const paddingClasses = {
  none: '',
  sm: 'p-4',
  md: 'p-5',
  lg: 'p-6'
} as const;

export const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
  { children, className, padding = 'md', variant = 'glass', ...props },
  ref,
) {
  return (
    <div
      ref={ref}
      className={cn('rounded-3xl', variantClasses[variant], paddingClasses[padding], className)}
      {...props}
    >
      {children}
    </div>
  );
});