import { Button, Flex, Typography } from 'antd';
import type { ButtonProps } from 'antd';
import type { ReactNode } from 'react';
import './EmptyIllustrationCard.css';

const { Paragraph, Text, Title } = Typography;

export type EmptyIllustrationCardVariant = 'default' | 'compact';

export type EmptyIllustrationCardProps = {
  title: ReactNode;
  description?: ReactNode;
  ctaLabel?: ReactNode;
  onCtaClick?: ButtonProps['onClick'];
  ctaProps?: Omit<ButtonProps, 'children' | 'onClick'>;
  variant?: EmptyIllustrationCardVariant;
  illustration?: ReactNode;
  eyebrow?: ReactNode;
  extra?: ReactNode;
  className?: string;
};

function DefaultIllustration() {
  return (
    <div className="empty-illustration-card__art" aria-hidden="true">
      <div className="empty-illustration-card__art-device">
        <span className="empty-illustration-card__art-line empty-illustration-card__art-line--strong" />
        <span className="empty-illustration-card__art-line" />
        <span className="empty-illustration-card__art-line empty-illustration-card__art-line--short" />
      </div>
      <div className="empty-illustration-card__art-orb empty-illustration-card__art-orb--orange" />
      <div className="empty-illustration-card__art-orb empty-illustration-card__art-orb--blue" />
      <div className="empty-illustration-card__art-ring" />
    </div>
  );
}

export function EmptyIllustrationCard({
  title,
  description,
  ctaLabel,
  onCtaClick,
  ctaProps,
  variant = 'default',
  illustration,
  eyebrow,
  extra,
  className,
}: EmptyIllustrationCardProps) {
  const rootClassName = [
    'empty-illustration-card',
    `empty-illustration-card--${variant}`,
    className ?? '',
  ]
    .filter(Boolean)
    .join(' ');

  return (
    <section className={rootClassName}>
      <div className="empty-illustration-card__visual">{illustration ?? <DefaultIllustration />}</div>
      <Flex vertical gap={variant === 'compact' ? 10 : 14} className="empty-illustration-card__content">
        {eyebrow ? <Text className="empty-illustration-card__eyebrow">{eyebrow}</Text> : null}
        <Flex vertical gap={6}>
          <Title level={variant === 'compact' ? 5 : 4} className="empty-illustration-card__title">
            {title}
          </Title>
          {description ? (
            <Paragraph className="empty-illustration-card__description">{description}</Paragraph>
          ) : null}
        </Flex>
        {ctaLabel || extra ? (
          <Flex gap={10} wrap="wrap" className="empty-illustration-card__actions">
            {ctaLabel ? (
              <Button type="primary" onClick={onCtaClick} {...ctaProps}>
                {ctaLabel}
              </Button>
            ) : null}
            {extra}
          </Flex>
        ) : null}
      </Flex>
    </section>
  );
}
