import React from 'react';
import { Card, Box, Heading, Text, Button } from '@wix/design-system';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { observer } from 'mobx-react-lite';

export interface AllCompleteStateProps {
  dataHook?: string;
  /** Fired when the celebratory CTA is clicked. */
  onCtaClick?: () => void;
}

/**
 * Shown when every step is completed. Built from WDS primitives only (no
 * illustration assets yet — a richer happy-moment hero is a later design
 * handoff). Mirrors the "You're all set" variant of the existing widget.
 */
export const AllCompleteState = observer(
  ({ dataHook, onCtaClick }: AllCompleteStateProps) => {
    const { translate: t } = useWixPatternsContainer();

    return (
      <Card dataHook={dataHook}>
        <Box
          dataHook="setup-all-complete"
          direction="vertical"
          padding="SP9"
          align="center"
          backgroundColor="B50"
          gap="SP3"
        >
          <Heading size="medium">
            {t('cairo.setupWidget.allComplete.title')}
          </Heading>
          <Text size="medium" secondary>
            {t('cairo.setupWidget.allComplete.subtitle')}
          </Text>
          <Box gap="SP2">
            <Button priority="primary" onClick={onCtaClick}>
              {t('cairo.setupWidget.allComplete.cta')}
            </Button>
          </Box>
        </Box>
      </Card>
    );
  },
);