'use client'

import type { PluginDetail } from '../types'
import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
import { useTranslation } from 'react-i18next'
import { ReadmePanelContent } from './content'

type ReadmeDialogProps = {
  detail: PluginDetail
  open: boolean
  onOpenChange: (open: boolean) => void
  triggerId?: string
}

export function ReadmeDialog({ detail, open, onOpenChange, triggerId }: ReadmeDialogProps) {
  const { t } = useTranslation()

  return (
    <Dialog open={open} onOpenChange={onOpenChange} triggerId={triggerId}>
      <DialogContent className="h-[calc(100dvh-16px)] w-full max-w-200 overflow-hidden p-0">
        <ReadmePanelContent
          detail={detail}
          title={
            <DialogTitle className="truncate text-xs font-medium text-text-tertiary uppercase">
              {t(($) => $['readmeInfo.title'], { ns: 'plugin' })}
            </DialogTitle>
          }
          closeButton={
            <DialogCloseButton
              aria-label={t(($) => $['operation.close'], { ns: 'common' })}
              className="static size-8 rounded-lg"
            />
          }
        />
      </DialogContent>
    </Dialog>
  )
}