Close button

'use client';

import * as React from 'react';
import { CloseButton } from './close-button';

const sizes = ['xs', 'sm', 'md', 'lg'] as const;
// Replay shows the banner button's hover fill, then its press, then lets it go.
const STEPS = [
  { at: 0, state: 'hover' },
  { at: 500, state: 'press' },
  { at: 700, state: 'hover' },
  { at: 1300, state: 'rest' },
] as const;
type DemoState = (typeof STEPS)[number]['state'];

const demoState: Record<DemoState, string> = {
  rest: '',
  hover: 'bg-colors-alpha-white-20',
  press: 'bg-colors-alpha-white-20 scale-(--lunia-scale-press) motion-reduce:scale-100',
};

export default function CloseButtonDemo({ replay = 0 }: { replay?: number }) {
  const [state, setState] = React.useState<DemoState>('rest');
  const [banner, setBanner] = React.useState(true);

  React.useEffect(() => {
    if (replay === 0) return;
    setBanner(true);
    const timers = STEPS.map((step) => window.setTimeout(() => setState(step.state), step.at));
    return () => {
      for (const t of timers) window.clearTimeout(t);
    };
  }, [replay]);

  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <div className="relative rounded-xl border border-secondary bg-primary p-5 pe-14 shadow-sm">
        <p className="text-sm font-semibold text-primary">Invite your team</p>
        <p className="mt-1 text-sm text-tertiary">
          Add people to this workspace to work on projects together.
        </p>
        <CloseButton label="Close invite card" className="absolute end-3 top-3" />
      </div>
      {banner ? (
        <div className="flex items-center gap-3 rounded-xl bg-brand-section py-2 ps-4 pe-2">
          <p className="flex-1 text-sm font-medium text-white">Version 2.4 is available.</p>
          <CloseButton
            size="md"
            darkBackground
            label="Close banner"
            className={demoState[state]}
            onClick={() => setBanner(false)}
          />
        </div>
      ) : (
        <button
          type="button"
          className="self-start text-sm font-semibold text-brand-secondary underline-offset-4 hover:underline"
          onClick={() => setBanner(true)}
        >
          Show the banner again
        </button>
      )}
      <div className="flex items-center justify-center gap-3">
        {sizes.map((size) => (
          <CloseButton key={size} size={size} label={`Close, size ${size}`} />
        ))}
      </div>
    </div>
  );
}