// @flow
import React from 'react';
import Page from 'component/page';
import ClaimListDiscover from 'component/claimListDiscover';
import { TYPE_TOP, TIME_ALL } from 'component/claimListDiscover/view';

type Props = {
  name: string,
};

function TopPage(props: Props) {
  const { name } = props;

  return (
    <Page>
      <ClaimListDiscover
        name={name}
        defaultTypeSort={TYPE_TOP}
        defaultTimeSort={TIME_ALL}
        defaultOrderBy={['effective_amount']}
        renderProperties={claim => <span className="media__subtitle">{claim.meta.effective_amount} LBC</span>}
        header={<span>{__('Top claims at lbry://%name%', { name })}</span>}
      />
    </Page>
  );
}

export default TopPage;