import React from 'react'
import SectionList from 'presets/SectionList'
import { SectionLinkListProps, ListItemProps } from './typings'
import {
  SectionLinkListData as defaultData,
  SectionLinkListTitle as defaultTitle,
} from './fixture'
import { StyledLink } from './styled'

/**
 * replacing the text as link
 */
const renderItemAsLink = (item: ListItemProps) => {
  return (
    <StyledLink key={item} to={item.href}>
      {item.label}
    </StyledLink>
  )
}

class SectionLinkList extends React.PureComponent<SectionLinkListProps> {
  static defaultProps = {
    className: '',
    list: defaultData,
    title: defaultTitle,
    renderItem: renderItemAsLink,
  }
  render() {
    return <SectionList {...this.props} />
  }
}

export { SectionLinkList }
export default SectionLinkList