Popover

'use client';
import { useState } from 'react';
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  Button,
  Input,
  type PopoverSize,
} from '@mbsw/ui';
import { Check, Copy } from 'lucide-react';

export default function Demo() {
  const settings = {
    "align": "center",
    "label": "open",
    "title": "link",
    "content": "https://example.com/document",
    "size": "md",
    "side": "top"
  };
  const [copyState, setCopyState] = useState<'idle' | 'copied' | 'error'>(
    'idle',
  );
  const link = settings.content;
  return (
    <div
      style={{
        display: 'flex',
        width: '100%',
        justifyContent:
          settings.side === 'right'
            ? 'flex-start'
            : settings.side === 'left'
              ? 'flex-end'
              : 'center',
      }}
    >
      <Popover onOpenChange={() => setCopyState('idle')}>
        <PopoverTrigger asChild>
          <Button variant="solid" tone="secondary">
            {settings.label}
          </Button>
        </PopoverTrigger>
        <PopoverContent
          size={settings.size as PopoverSize}
          side={settings.side as 'top' | 'right' | 'bottom' | 'left'}
          align={settings.align as 'start' | 'center' | 'end'}
          sideOffset={8}
          aria-label={settings.title || 'Popover'}
          collisionPadding={16}
          style={{
            maxWidth:
              'min(calc(100vw - 32px), var(--radix-popover-content-available-width))',
          }}
        >
          <div style={{ display: 'grid', gap: 12 }}>
            <label htmlFor="link" style={{ fontWeight: 600 }}>
              {settings.title}
            </label>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <Input
                id="link"
                size="md"
                readOnly
                value={link}
                style={{ minWidth: 0, flex: 1 }}
              />
              <Button
                iconOnly
                icon={copyState === 'copied' ? Check : Copy}
                size="lg"
                variant="outline"
                tone="secondary"
                aria-label={
                  copyState === 'copied' ? "Link copied" : "Copy link"
                }
                style={{ flexShrink: 0 }}
                onClick={async () => {
                  try {
                    await navigator.clipboard.writeText(link);
                    setCopyState('copied');
                  } catch {
                    setCopyState('error');
                  }
                }}
              />
            </div>
            {copyState === 'error' && (
              <span role="alert">{"Select the link to copy it manually."}</span>
            )}
          </div>
        </PopoverContent>
      </Popover>
    </div>
  );
}