import { forwardRef, type ComponentPropsWithoutRef } from "react";

import {
  emptyStateActionsVariants,
  emptyStateDescriptionVariants,
  emptyStateEyebrowVariants,
  emptyStateHeaderVariants,
  emptyStateMediaVariants,
  emptyStateTitleVariants,
  emptyStateVariants
} from "./empty-state.variants";
import { cn } from "../lib/cn";
import type { VariantProps } from "../lib/cva";
import { createDataAttributes, createSlot } from "../lib/contracts";

export type EmptyStateProps = ComponentPropsWithoutRef<"div"> &
  VariantProps<typeof emptyStateVariants>;

export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(
  { align, className, layout, tone, ...props },
  ref
) {
  return (
    <div
      {...props}
      {...createSlot("root")}
      {...createDataAttributes({ align, layout, tone })}
      className={cn(emptyStateVariants({ align, layout, tone }), className)}
      ref={ref}
    />
  );
});

export type EmptyStateMediaProps = ComponentPropsWithoutRef<"div"> &
  VariantProps<typeof emptyStateMediaVariants>;

export const EmptyStateMedia = forwardRef<HTMLDivElement, EmptyStateMediaProps>(
  function EmptyStateMedia({ className, size, ...props }, ref) {
    return (
      <div
        {...props}
        {...createSlot("media")}
        {...createDataAttributes({ size })}
        className={cn(emptyStateMediaVariants({ size }), className)}
        ref={ref}
      />
    );
  }
);

export type EmptyStateHeaderProps = ComponentPropsWithoutRef<"div"> &
  VariantProps<typeof emptyStateHeaderVariants>;

export const EmptyStateHeader = forwardRef<HTMLDivElement, EmptyStateHeaderProps>(
  function EmptyStateHeader({ align, className, ...props }, ref) {
    return (
      <div
        {...props}
        {...createSlot("header")}
        {...createDataAttributes({ align })}
        className={cn(emptyStateHeaderVariants({ align }), className)}
        ref={ref}
      />
    );
  }
);

export type EmptyStateEyebrowProps = ComponentPropsWithoutRef<"p">;

export const EmptyStateEyebrow = forwardRef<HTMLParagraphElement, EmptyStateEyebrowProps>(
  function EmptyStateEyebrow({ className, ...props }, ref) {
    return (
      <p
        {...props}
        {...createSlot("eyebrow")}
        className={cn(emptyStateEyebrowVariants(), className)}
        ref={ref}
      />
    );
  }
);

export type EmptyStateTitleProps = ComponentPropsWithoutRef<"h3">;

export const EmptyStateTitle = forwardRef<HTMLHeadingElement, EmptyStateTitleProps>(
  function EmptyStateTitle({ className, ...props }, ref) {
    return (
      <h3
        {...props}
        {...createSlot("label")}
        className={cn(emptyStateTitleVariants(), className)}
        ref={ref}
      />
    );
  }
);

export type EmptyStateDescriptionProps = ComponentPropsWithoutRef<"p">;

export const EmptyStateDescription = forwardRef<
  HTMLParagraphElement,
  EmptyStateDescriptionProps
>(function EmptyStateDescription({ className, ...props }, ref) {
  return (
    <p
      {...props}
      {...createSlot("description")}
      className={cn(emptyStateDescriptionVariants(), className)}
      ref={ref}
    />
  );
});

export type EmptyStateActionsProps = ComponentPropsWithoutRef<"div"> &
  VariantProps<typeof emptyStateActionsVariants>;

export const EmptyStateActions = forwardRef<HTMLDivElement, EmptyStateActionsProps>(
  function EmptyStateActions({ className, layout, ...props }, ref) {
    return (
      <div
        {...props}
        {...createSlot("actions")}
        {...createDataAttributes({ layout })}
        className={cn(emptyStateActionsVariants({ layout }), className)}
        ref={ref}
      />
    );
  }
);