text: import React, { useContext } from 'react'
  import { format } from 'timeago.js'
  import { SiLetterboxd } from 'react-icons/si'
  import { VscTriangleUp } from 'react-icons/vsc'
  import CardComponent from '../components/CardComponent'
  import ListComponent from '../components/ListComponent'
  import lobstersApi from '../services/lobsters'
  import { BiCommentDetail } from 'react-icons/bi'
  import { MdAccessTime } from 'react-icons/md'
  import { GoPrimitiveDot } from 'react-icons/go'
  import CardLink from '../components/CardLink'
  import CardItemWithActions from '../components/CardItemWithActions'
  import ClickableItem from '../components/ClickableItem'
  import PreferencesContext from '../preferences/PreferencesContext'
  
  const StoryItem = ({ item, index, analyticsTag }) => {
    const { listingMode } = useContext(PreferencesContext)
    return (
      <CardItemWithActions
        source={'lobsters'}
        index={index}
        item={item}
        key={index}
        cardItem={
          <>
            <p className="rowTitle">
              <CardLink link={item.url} analyticsSource={analyticsTag}>
                {listingMode === 'compact' && (
                  <div className="counterWrapper">
                    <VscTriangleUp />
                    <span className="value">{item.score}</span>
                  </div>
                )}
  
                <div className="subTitle">{item.title}</div>
              </CardLink>
            </p>
            {listingMode === 'normal' && (
              <div className="rowDetails">
                <span className="rowItem lobstersRowItem">
                  <GoPrimitiveDot className="rowItemIcon" /> {item.score} points
                </span>
                <span className="rowItem" title={new Date(item.created_at).toUTCString()}>
                  <MdAccessTime className="rowItemIcon" /> {format(new Date(item.created_at))}
                </span>
                <ClickableItem
                  link={item.comments_url}
                  className="rowItem rowItemClickable"
                  analyticsSource={analyticsTag}>
                  <BiCommentDetail className="rowItemIcon" /> {item.comment_count} comments
                </ClickableItem>
              </div>
            )}
          </>
        }
      />
    )
  }
  
  function LobstersCard({ analyticsTag, label, icon, withAds }) {
    const fetchStories = async () => {
      return await lobstersApi.getTopStories()
    }
  
    const renderItem = (item, index) => (
      <StoryItem item={item} key={`lb-${index}`} index={index} analyticsTag={analyticsTag} />
    )
  
    return (
      <CardComponent
        icon={<span className="blockHeaderIcon">{icon}</span>}
        link="https://lobste.rs/"
        title={label}>
        <ListComponent fetchData={fetchStories} renderItem={renderItem} withAds={withAds} />
      </CardComponent>
    )
  }
  
  export default LobstersCard
  