import React from 'react'
import { CategoryBaseComponentProps, CategoryGridProps } from './typings'
import {
  StyledTitle,
  StyledMediaCarousel,
  StyledFigure,
  StyledWrapper,
} from './styled'

function defaultRenderComponent(props: CategoryBaseComponentProps) {
  const { src, caption } = props
  return <StyledFigure caption={caption} src={src} />
}

function defaultRenderWrapper(props: CategoryGridProps) {
  const { className, title, ...remainingProps } = props
  return (
    <StyledWrapper className={className}>
      <StyledTitle>{title}</StyledTitle>
      <StyledMediaCarousel
        renderComponent={defaultRenderComponent}
        {...remainingProps}
      />
    </StyledWrapper>
  )
}

export { defaultRenderWrapper }