ResponsivePopover

 'use client';

import { useState } from 'react';
import { Button } from '@mildang/design-system/Button';
import { ResponsivePopover } from '@mildang/design-system/ResponsivePopover';
import { css } from '@mildang/styled-system/css';

const contentCard = css({ backgroundColor: 'neutral.surface.low', borderRadius: '16', overflow: 'hidden', width: '320px' });
const bodyStyle = css({ p: '24', minHeight: '120px' });
const footerStyle = css({ display: 'flex', justifyContent: 'flex-end', gap: '8', px: '24', py: '16' });

export default function ResponsivePopoverExample() {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ padding: 24 }}>
      <ResponsivePopover open={open} onOpenChange={setOpen}>
      <ResponsivePopover.Trigger asChild>
        <Button variant="primary" size="lg">열기</Button>
      </ResponsivePopover.Trigger>
      <ResponsivePopover.Content aria-label="예시 팝업" className={contentCard}>
        <ResponsivePopover.Body className={bodyStyle}>
          <p style={{ marginTop: 0 }}>여기에 원하는 컨텐츠를 넣어 사용합니다.</p>
          <p style={{ marginBottom: 0, fontSize: 12, color: '#888' }}>
            뷰포트 너비를 바꿔보세요 (≥ 960px = Popover, &lt; 960px = Dialog)
          </p>
        </ResponsivePopover.Body>
        <ResponsivePopover.Footer className={footerStyle}>
          <Button variant="quaternary" size="lg" onClick={() => setOpen(false)}>취소</Button>
          <Button variant="primary" size="lg" onClick={() => setOpen(false)}>확인</Button>
        </ResponsivePopover.Footer>
      </ResponsivePopover.Content>
      </ResponsivePopover>
    </div>
  );
}