// frontend\src\components\ui\Card.tsx

'use client'

import clsx from 'clsx'
import type { PropsWithChildren, ReactNode } from 'react'

type CardProps = {
  header?: ReactNode
  footer?: ReactNode
  grayBody?: boolean
  grayFooter?: boolean
  edgeToEdgeMobile?: boolean
  well?: boolean
  noBodyPadding?: boolean
  className?: string
  bodyClassName?: string
}

export default function Card({
  header,
  footer,
  grayBody = false,
  grayFooter = false,
  edgeToEdgeMobile = false,
  well = false,
  noBodyPadding = false,
  className,
  bodyClassName,
  children,
}: PropsWithChildren<CardProps>) {
  const isWell = well

  return (
    <div
      className={clsx(
        'overflow-hidden',
        edgeToEdgeMobile ? 'sm:rounded-lg' : 'rounded-lg',
        isWell
          ? 'bg-gray-50 dark:bg-gray-800 shadow-none'
          : 'bg-white shadow-sm dark:bg-gray-800 dark:shadow-none dark:outline dark:-outline-offset-1 dark:outline-white/10',
        className
      )}
    >
      {header && (
        <div className="shrink-0 px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-white/10">
          {header}
        </div>
      )}

      <div
        className={clsx(
          'min-h-0', // ✅ wichtig bei flex layouts
          noBodyPadding ? 'p-0' : 'px-4 py-5 sm:p-6',
          grayBody && 'bg-gray-50 dark:bg-gray-800',
          bodyClassName
        )}
      >
        {children}
      </div>

      {footer && (
        <div
          className={clsx(
            'shrink-0 px-4 py-4 sm:px-6', // ✅ shrink-0
            grayFooter && 'bg-gray-50 dark:bg-gray-800/50',
            'border-t border-gray-200 dark:border-white/10'
          )}
        >
          {footer}
        </div>
      )}
    </div>
  )
}