'use client';

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@workspace/airo-ui/components/dialog';
import { Markdown } from '@workspace/airo-ui/custom-components/markdown';
import { useImperativeHandle, useState } from 'react';

export interface PopupData {
  title: string;
  content: string;
}

export interface PopupRef {
  open: (data: PopupData) => void;
  close: () => void;
}

interface PopupProps {
  ref?: React.Ref<PopupRef>;
}

export const Popup = ({ ref }: PopupProps) => {
  const [open, setOpen] = useState(false);
  const [data, setData] = useState<PopupData>({ title: '', content: '' });

  useImperativeHandle(ref, () => ({
    open: (newData: PopupData) => {
      setData(newData);
      setOpen(true);
    },
    close: () => {
      setOpen(false);
    },
  }));

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className='flex max-h-[350px] min-h-[420px] max-w-[80%] flex-col justify-center rounded-[25px] sm:max-w-[425px]'>
        <DialogHeader>
          <DialogTitle className={'sr-only'}>{data.title}</DialogTitle>
        </DialogHeader>
        <div className={'font-light'}>
          <div className={'mb-4 text-xl'}>{data.title}</div>
          <Markdown>{data.content}</Markdown>
        </div>
      </DialogContent>
    </Dialog>
  );
};
