import React, { Component } from 'react';
import { Row, Col } from 'antd';

import PageHeader from '@imd/components/utility/pageHeader';
import Box from '@imd/components/utility/box';
import LayoutWrapper from '@imd/components/utility/layoutWrapper';
import ContentHolder from '@imd/components/utility/contentHolder';

import basicStyle from '@imd/assets/styles/constants';
import IsoWidgetsWrapper from '@imd/containers/Widgets/WidgetsWrapper';
import TotalSongsByDayLine from './Components/TotalSongsByDayLine/TotalSongsByDayLine';
import CardWidget from '@imd/containers/Widgets/Card/CardWidget';
import UserData from './Data/StreamingHistory0.json';

export default class extends Component {

  render() {

    let songs = UserData;

    const { rowStyle, colStyle, gutter } = basicStyle;

    return (
      <LayoutWrapper>
        <PageHeader>Data</PageHeader>

        {UserData.map((song, idx) => (
            <Col lg={6} md={12} sm={12} xs={24} style={colStyle}>
                <Box>
                    <h1>{song.trackName}</h1>
                    <div>Artist: {song.artistName}</div>
                    <div>{song.endTime}</div>
                </Box>
            </Col>
         ))}
      </LayoutWrapper>
    );
  };
}