import React, { Component } from "react";
import SearchLink from "./internal/SearchLink.jsx";
import Radium from "radium";
const SavedSearchListStyle = {
    list: {
        margin: 0,
        padding: 0
    },
    listItem: {
        listStyle: 'none',
        position: 'relative',
        padding: 0,
        borderBottom: '1px solid #dee5e7',
        minHeight: '50px',
        display: 'flex',
        ':hover': {
            backgroundColor: '#f2f2f2'
        }
    },
    link: {
        textDecoration: 'none',
        cursor: 'pointer',
        fontSize: '18px',
        lineHeight: '50px',
        paddingLeft: '15px'
    }
};

class SavedSearchList extends Component {

    render() {
        const { searches, onSearchClick } = this.props;
        let searchContent;

        searchContent = searches.map( ( search, index ) => {
            return <li style={SavedSearchListStyle.listItem} onClick={onSearchClick} key={index}>
                <div style={SavedSearchListStyle.link}>
                    <SearchLink search={search}></SearchLink>
                </div>
            </li>
        } );

        return (<div>
                <ul style={SavedSearchListStyle.list}>
                    {searchContent}
                </ul>
            </div>
        );
    }
}

export default Radium( SavedSearchList );