import type { App, Plugin } from 'vue'

import SkeletonAvatar from './Avatar'
import SkeletonButton from './Button'
import SkeletonImage from './Image'
import SkeletonInput from './Input'
import Skeleton from './Skeleton'
import SkeletonTitle from './Title'

export type { SkeletonButtonProps } from './Button'
export type { SkeletonInputProps } from './Input'
export type { SkeletonImageProps } from './Image'
export type { SkeletonAvatarProps } from './Avatar'
export type { SkeletonTitleProps } from './Title'

export type { SkeletonProps } from './Skeleton'
export { skeletonProps } from './Skeleton'

Skeleton.Button = SkeletonButton
Skeleton.Avatar = SkeletonAvatar
Skeleton.Input = SkeletonInput
Skeleton.Image = SkeletonImage
Skeleton.Title = SkeletonTitle

/* istanbul ignore next */
Skeleton.install = function (app: App) {
  app.component(Skeleton.name, Skeleton)
  app.component(Skeleton.Button.name, SkeletonButton)
  app.component(Skeleton.Avatar.name, SkeletonAvatar)
  app.component(Skeleton.Input.name, SkeletonInput)
  app.component(Skeleton.Image.name, SkeletonImage)
  app.component(Skeleton.Title.name, SkeletonTitle)
  return app
}
export { SkeletonAvatar, SkeletonButton, SkeletonImage, SkeletonInput, SkeletonTitle }
export default Skeleton as typeof Skeleton &
  Plugin & {
    readonly Button: typeof SkeletonButton
    readonly Avatar: typeof SkeletonAvatar
    readonly Input: typeof SkeletonInput
    readonly Image: typeof SkeletonImage
  }
