import type { ComponentType, ReactNode } from 'react'
import type { HTMLAttrs, Variant } from './common'

type FooterPadding = {
  paddingBottom?: number
  paddingLeft?: number
  paddingRight?: number
  paddingTop?: number
}

type BorderRadius = {
  borderBottomLeftRadius: number
  borderBottomRightRadius: number
  borderTopLeftRadius: number
  borderTopRightRadius: number
}

type FullBleedContent = {
  position: 'none' | 'bottom' | 'left' | 'right' | 'top'
  align?: 'start' | 'end' | 'center' | 'stretch'
  borderRadius?: BorderRadius
  content?: ReactNode
  src?: string
  alt?: string
  xsSrc?: string
  smSrc?: string
  fallbackSrc?: string
  mdSrc?: string
  lgSrc?: string
  xlSrc?: string
  loading?: 'eager' | 'lazy'
}

export interface CardProps extends HTMLAttrs {
  children: ReactNode
  variant?: Variant
  footer?: ReactNode
  footerPadding?: FooterPadding
  fullBleedImage?: FullBleedContent
  fullBleedContent?: FullBleedContent
}

declare const Card: ComponentType<CardProps>

export default Card