import React from 'react';
import { styled } from '@linaria/react';

import { SectionAside, Readmore } from '@fe-cnyes/fe-common-ui';
// import News24h from './News24h/News24h';

const Container = styled.div`
  width: 334px;
  font-size: 24px;
  text-align: center;
`;

const ListAside = () => {
  return (
    <Container>
      {/* 主編精選 */}
      {/* https://github.com/vercel/next.js/issues/42292 之後typescript更新上去可拿掉 */}
      {/* <News24h /> */}
      {/* 人氣排行 */}
      <SectionAside
        title="人氣排行"
        icon="/assets/icons/popularRank.svg"
        RightContent={<Readmore />}
      />
      {/* 熱門話題 */}
      <SectionAside
        title="熱門話題"
        icon="/assets/icons/hotTopic.svg"
        RightContent={<Readmore />}
      />
      {/* 主編精選 */}
      <SectionAside
        title="議題新聞"
        icon="/assets/icons/issueNews.svg"
        RightContent={<Readmore />}
      />
      {/* 專題報導 */}
      <SectionAside
        title="專題報導"
        icon="/assets/icons/topicNews.svg"
        RightContent={<Readmore />}
      />
      {/* 鉅亨服務 */}
      <SectionAside title="鉅亨服務" icon="/assets/icons/anueService.svg" />
    </Container>
  );
};

export default ListAside;