import { IGatsbyImageData } from 'gatsby-plugin-image'
import * as React from 'react'
import type { IconType } from 'react-icons'

export type PageType = 'index' | 'year' | 'category' | 'search'

export interface RecentPost {
  slug: string
  title: string
}

export interface TagCount {
  name: string
  totalCount: number
}

export interface PageContext {
  page: PageType
  archives: Record<string, number>
  recentPosts: RecentPost[]
  tags: TagCount[]
  filter?: unknown
  limit?: number
  skip?: number
  numPages?: number
  currentPage?: number
  year?: string
  tag?: string
}

export interface PostFrontmatter {
  title: string
  date: string
  author?: string
  authorLink?: string
  description?: string
  tags?: string[]
  heading?: string
  desc?: string
  previewImg?: {
    childImageSharp?: {
      gatsbyImageData: IGatsbyImageData
    }
  }
}

export interface PostNode {
  id?: string
  html: string
  fields: {
    slug: string
  }
  frontmatter: PostFrontmatter
}

export interface LayoutProps {
  location: Location
  heroSection?: boolean
  heading?: string
  desc?: string
  children?: React.ReactNode
}

export interface HeroSectionProps {
  location: Location
  heading?: string
  desc?: string
}

export interface NavibarProps {
  location: Location
}

export interface ContainerProps {
  children?: React.ReactNode
}

export interface SectionProps {
  children?: React.ReactNode
  color?: string
  bgColor?: string
  bottomArrow?: boolean
}

export interface SeoProps {
  description?: string
  lang?: string
  meta?: Array<{ name?: string; property?: string; content?: string }>
  title?: string
  previewImg?: string
}

export interface SolidButtonProps {
  children: React.ReactNode
  theme?: 'light' | 'dark'
  type?: 'button' | 'submit' | 'reset'
  disabled?: boolean
  onClick?: React.MouseEventHandler<HTMLButtonElement>
}

export interface OutlineButtonProps {
  children: React.ReactNode
}

export interface FaqProps {
  question: string
  answer: string
}

export interface FeatureProps {
  title: string
  desc: string
  Icon: IconType
  className?: string
}

export interface ReasonProps {
  text: string
  bgColor?: string
}

export interface ArtProps {
  src: string
  info?: string
}

export interface StyledAnchorProps {
  href: string
  children?: React.ReactNode
}

export type SearchPost = {
  id: string
  html: string
  slug: string
  title: string
  date: string
  previewImg?: PostFrontmatter['previewImg']
}
