/**
 * BoostMedia AI Content Generator Admin - Card Component
 *
 * @package BoostMedia_AI
 * @license GPL-2.0-or-later
 */

import type { ReactNode, HTMLAttributes } from 'react'

interface CardProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode
  padding?: 'sm' | 'md' | 'lg' | 'none'
}

interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode
}

interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
  children: ReactNode
  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
}

interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode
}

interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode
}

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

export function Card({ children, padding = 'md', className = '', ...props }: CardProps) {
  return (
    <div
      className={`
        bg-white rounded-bc-md shadow-bc
        ${paddingClasses[padding]}
        ${className}
      `}
      {...props}
    >
      {children}
    </div>
  )
}

export function CardHeader({ children, className = '', ...props }: CardHeaderProps) {
  return (
    <div
      className={`
        mb-4 pb-4 border-b border-bc-gray-200
        ${className}
      `}
      {...props}
    >
      {children}
    </div>
  )
}

export function CardTitle({
  children,
  as: Tag = 'h3',
  className = '',
  ...props
}: CardTitleProps) {
  return (
    <Tag
      className={`
        text-xl font-semibold text-bc-gray-800
        ${className}
      `}
      {...props}
    >
      {children}
    </Tag>
  )
}

export function CardContent({ children, className = '', ...props }: CardContentProps) {
  return (
    <div className={className} {...props}>
      {children}
    </div>
  )
}

export function CardFooter({ children, className = '', ...props }: CardFooterProps) {
  return (
    <div
      className={`
        mt-4 pt-4 border-t border-bc-gray-200
        ${className}
      `}
      {...props}
    >
      {children}
    </div>
  )
}