import React from "react"
import { classNames } from "../../../utils"
import { CenterAligned } from "../../CenterAligned"
import { EmptyState, EmptyStateProps } from "../../EmptyState"
import {
  TimeSeriesChartSkeleton,
  TimeSeriesChartSkeletonProps,
} from "./TimeSeriesChartSkeleton"

type Props = {
  className?: string
  overrides?: {
    Skeleton?: Partial<TimeSeriesChartSkeletonProps>
    EmptyState?: Partial<EmptyStateProps>
  }
}

export function TimeSeriesChartEmptyState({ overrides, className }: Props) {
  return (
    <TimeSeriesChartSkeleton
      {...overrides?.Skeleton}
      className={classNames(className, overrides?.Skeleton?.className)}
      contentClassName={classNames(
        "opacity-25",
        overrides?.Skeleton?.contentClassName,
      )}
      skeletonClassName={classNames(
        "animate-none",
        overrides?.Skeleton?.skeletonClassName,
      )}
    >
      <CenterAligned className="absolute size-full [background:radial-gradient(theme(colors.base-1),transparent,transparent)]">
        <EmptyState
          showIcon={false}
          variant="no-chart-data"
          {...overrides?.EmptyState}
        />
      </CenterAligned>
    </TimeSeriesChartSkeleton>
  )
}