EvoBGP/apps/web/src/components/analytics/analytics-card-shell.tsx

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

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@evobgp/ui/components/card'
import { cn } from '@evobgp/ui/lib/utils'
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '@evobgp/ui/components/tooltip'

export function AnalyticsCardShell({
  title,
  description,
  info,
  actions,
  footer,
  className,
  children,
}: {
  title: string
  description?: string
  info?: string
  actions?: ReactNode
  footer?: ReactNode
  className?: string
  children: ReactNode
}) {
  return (
    <Card className={cn('flex h-full flex-col gap-0 overflow-hidden', className)}>
      <CardHeader className="flex flex-row items-start justify-between gap-3 border-b py-4">
        <div className="min-w-0 space-y-1">
          <CardTitle className="flex items-center gap-2 text-base">
            {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}
          </CardTitle>
          {description ? <CardDescription>{description}</CardDescription> : null}
        </div>
        {actions ? <div className="shrink-0">{actions}</div> : null}
      </CardHeader>
      <CardContent className="flex flex-1 flex-col gap-5 p-5">{children}</CardContent>
      {footer ? <CardFooter className="gap-2 border-t p-4">{footer}</CardFooter> : null}
    </Card>
  )
}