import {
  Card,
  type CardBodyProps,
  type CardDescriptionProps,
  type CardHeaderProps,
  type CardRootProps,
  type CardTitleProps,
} from '@chakra-ui/react'
import type { ReactNode } from 'react'

export interface CalledItCardProps extends Omit<CardRootProps, 'title'> {
  cardTitle?: ReactNode
  cardDescription?: ReactNode
  headerProps?: CardHeaderProps
  titleProps?: CardTitleProps
  descriptionProps?: CardDescriptionProps
  bodyProps?: CardBodyProps
  children: ReactNode
}

export function CalledItCard({
  cardTitle,
  cardDescription,
  headerProps,
  titleProps,
  descriptionProps,
  bodyProps,
  children,
  ...props
}: CalledItCardProps) {
  return (
    <Card.Root
      borderColor="border"
      bg="panel"
      rounded="2xl"
      shadow="xs"
      {...props}
    >
      {(cardTitle || cardDescription) && (
        <Card.Header {...headerProps}>
          {cardTitle && (
            <Card.Title color="heading" {...titleProps}>
              {cardTitle}
            </Card.Title>
          )}
          {cardDescription && (
            <Card.Description color="text" {...descriptionProps}>
              {cardDescription}
            </Card.Description>
          )}
        </Card.Header>
      )}
      <Card.Body {...bodyProps}>{children}</Card.Body>
    </Card.Root>
  )
}
