import { Skeleton } from '@/components/ui/skeleton'
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
import {
  entityDialogBodyClasses,
  entityDialogContentClasses,
  entityDialogFooterClasses,
  entityDialogHeaderClasses,
} from '@/components/shared/entity-dialog-layout'
import { cn } from '@/lib/utils'

export function TaskDialogSkeleton() {
  return (
    <Dialog open>
      <DialogContent
        showCloseButton={false}
        className={cn(
          entityDialogContentClasses,
          '[animation-delay:200ms] [animation-fill-mode:backwards]',
        )}
      >
        <DialogTitle className="sr-only">Taak laden…</DialogTitle>

        <div className={entityDialogHeaderClasses}>
          <div className="flex items-center gap-2">
            <Skeleton className="h-7 w-40" />
            <Skeleton className="h-5 w-14 rounded-full" />
          </div>
          <Skeleton className="h-4 w-28" />
        </div>

        <div className={entityDialogBodyClasses}>
          <div>
            <Skeleton className="h-4 w-12 mb-2" />
            <Skeleton className="h-9 w-full" />
          </div>
          <div>
            <Skeleton className="h-4 w-12 mb-2" />
            <Skeleton className="h-14 w-full" />
          </div>
          <div>
            <Skeleton className="h-4 w-24 mb-2" />
            <Skeleton className="h-20 w-full" />
          </div>
          <div>
            <Skeleton className="h-4 w-32 mb-2" />
            <Skeleton className="h-32 w-full" />
          </div>
          <div>
            <Skeleton className="h-4 w-16 mb-2" />
            <Skeleton className="h-9 w-64" />
          </div>
          <div>
            <Skeleton className="h-4 w-12 mb-2" />
            <Skeleton className="h-9 w-48" />
          </div>
        </div>

        <div className={entityDialogFooterClasses}>
          <div className="flex items-center justify-between gap-2">
            <Skeleton className="h-9 w-28" />
            <div className="flex gap-2">
              <Skeleton className="h-9 w-24" />
              <Skeleton className="h-9 w-24" />
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}