import { Skeleton } from '@/components/ui/skeleton'
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
import { cn } from '@/lib/utils'

export function TaskDialogSkeleton() {
  return (
    <Dialog open>
      <DialogContent
        showCloseButton={false}
        className={cn(
          'flex flex-col p-0 gap-0',
          'max-h-[90vh] w-full max-w-[calc(100%-2rem)]',
          'sm:max-w-[90vw] sm:max-h-[85vh]',
          'lg:max-w-[50vw] lg:min-w-[480px]',
          '[animation-delay:200ms] [animation-fill-mode:backwards]',
        )}
      >
        <DialogTitle className="sr-only">Taak laden…</DialogTitle>

        {/* Header */}
        <div className="px-6 pt-5 pb-4 border-b border-outline-variant shrink-0">
          <Skeleton className="h-7 w-40" />
        </div>

        {/* Body — 3 bars mimicking title + description + plan */}
        <div className="flex-1 px-6 py-6 space-y-6">
          <Skeleton className="h-14 w-full" />
          <Skeleton className="h-24 w-full" />
          <Skeleton className="h-32 w-full" />
        </div>

        {/* Footer */}
        <div className="border-t border-outline-variant px-6 py-4 shrink-0">
          <div className="flex justify-end gap-2">
            <Skeleton className="h-8 w-24" />
            <Skeleton className="h-8 w-24" />
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}