import React, { HTMLAttributes } from 'react';
import styled, { css } from 'styled-components';

export interface ContentPanelProps extends HTMLAttributes<HTMLDivElement> {
  variant?: 'elevated' | 'muted' | 'inset';
  padding?: 'none' | 'sm' | 'md' | 'lg';
}

const StyledPanel = styled.div<{
  $variant: NonNullable<ContentPanelProps['variant']>;
  $padding: NonNullable<ContentPanelProps['padding']>;
}>`
  border-radius: ${({ theme }) => theme.borderRadius.lg};
  transition:
    box-shadow ${({ theme }) => theme.transitions.fast},
    border-color ${({ theme }) => theme.transitions.fast};

  ${({ $variant, theme }) => {
    switch ($variant) {
      case 'muted':
        return css`
          background-color: ${theme.colors.surfaceElevated};
          border: 1px solid ${theme.colors.borderSoft};
          box-shadow: ${theme.shadows.sm};
        `;
      case 'inset':
        return css`
          background-color: ${theme.colors.surfaceInset};
          border: 1px solid ${theme.colors.borderSoft};
          box-shadow: ${theme.shadows.inner};
        `;
      default:
        return css`
          background-color: ${theme.colors.surfaceElevated};
          border: 1px solid ${theme.colors.borderSoft};
          box-shadow: ${theme.shadows.sm};
        `;
    }
  }}

  ${({ $padding, theme }) => {
    switch ($padding) {
      case 'none':
        return '';
      case 'sm':
        return css`padding: ${theme.spacing[4]};`;
      case 'lg':
        return css`padding: ${theme.layout.cardPaddingLg};`;
      default:
        return css`padding: ${theme.layout.cardPaddingMd};`;
    }
  }}
`;

export const ContentPanel: React.FC<ContentPanelProps> = ({
  variant = 'elevated',
  padding = 'md',
  children,
  ...rest
}) => (
  <StyledPanel $variant={variant} $padding={padding} {...rest}>
    {children}
  </StyledPanel>
);