import type { ReactNode } from 'react'
import { Info } from 'lucide-react'

import { cn } from '@evobgp/ui/lib/utils'
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '@evobgp/ui/components/tooltip'

import { PanelCard } from '@/components/panel-card'

export function AnalyticsCardShell({
  title,
  description,
  info,
  actions,
  footer,
  className,
  children,
}: {
  title: string
  description?: string
  info?: string
  actions?: ReactNode
  footer?: ReactNode
  className?: string
  children: ReactNode
}) {
  const titleNode = (
    <span className="flex items-center gap-2">
      {title}
      {info ? (
        <Tooltip>
          <TooltipTrigger
            className="inline-flex text-muted-foreground transition-colors hover:text-foreground"
            aria-label="Подробнее"
          >
            <Info className="size-3.5" />
          </TooltipTrigger>
          <TooltipContent side="top" className="max-w-xs text-xs">
            {info}
          </TooltipContent>
        </Tooltip>
      ) : null}
    </span>
  )

  return (
    <PanelCard
      title={titleNode}
      description={description}
      actions={actions}
      footer={footer}
      className={cn('overflow-hidden', className)}
      contentClassName="flex flex-col gap-5 py-5"
      footerClassName={footer ? 'gap-2 px-5 py-4' : undefined}
    >
      {children}
    </PanelCard>
  )
}