import { ComponentChild, ComponentChildren } from 'preact'

import type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts'

export interface TeaserCardProps extends SharedProps {
  /** The area where the column is rendered */
  areaType?: 'main' | 'right' | 'bauta'
  /** Target URL for the teaser */
  targetLink?: string
  /** The theme-class to apply to the teaser */
  theme?: 'kultur' | 'nyheter'
  children?: ComponentChildren
}

export interface TeaserBaseProps extends TeaserTitleProps, Omit<TeaserCardProps, 'children' | 'theme'> {}

export interface TeaserTitleProps {
  /** Heading of the teaser */
  title: string
}

export interface TeaserThemeProps extends Pick<TeaserCardProps, 'theme'> {}

export interface TeaserHighlightProps {
  /** Text before the heading */
  highlight?: string
}

export interface TeaserItalicHeadlineProps {
  /** If the headline should be italic */
  isItalicHeadline?: boolean
}

export interface TeaserVignetteProps {
  /** Top text in the teaser */
  vignette?: string
}

export interface TeaserVariantProps {
  /** Variant of the teaser */
  variant?: 'default' | 'podcast' | 'direkt' | 'insandare'
}

export interface TeaserMediaProps {
  /** Main image or other media */
  media?: ComponentChild
}

export interface TeaserBylineProps {
  /** Byline image */
  bylinePicture?: ComponentChild
}

export interface TeaserTextProps {
  /** Teaser subtext */
  text?: string
}

export interface TeaserBodyDecoratorsProps {
  /** Red text before the text */
  sticker?: string
  /** If there should be a flashing ball before the text */
  isFlashingDot?: boolean
}

export interface TeaserFooterProps extends SharedProps {
  /** Publication time text */
  publicationTime?: string
  /** Duration of podcast */
  duration?: string
  /** Shows in teaser footer */
  sectionName?: string
}