import streamlit as st
from datasets import load_dataset
import streamlit.components.v1 as components

# Load the dataset
dataset = load_dataset("awacke1/DatasetOfDatasetsUSA")

# Initialize session state for record navigation
if 'index' not in st.session_state:
    st.session_state.index = 0

# Define the maximum index as the length of the dataset - 1
max_index = len(dataset['train']) - 1

# Navigation buttons
col1, col2, col3, col4, col5 = st.columns(5)
with col1:
    if st.button('⏮️'):
        st.session_state.index = 0
with col2:
    if st.button('◀️') and st.session_state.index > 0:
        st.session_state.index -= 1
with col3:
    st.write(f"Record {st.session_state.index + 1} of {max_index + 1}")
with col4:
    if st.button('▶️') and st.session_state.index < max_index:
        st.session_state.index += 1
with col5:
    if st.button('⏭️'):
        st.session_state.index = max_index

# Assuming the dataset has the columns 'cityOrState', 'link', and 'linkType'
item = dataset['train'][st.session_state.index]
cityOrState = item['cityOrState']
link = item['link']
linkType = item['linkType']

# Build the HTML for the current record
links_html = f"""
<ul style="list-style: none; padding: 0;">
    <li style="margin: 10px 0; padding: 10px; background-color: #f0f0f0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
        <a href="{link}" target="_blank" style="text-decoration: none; color: #333;">
            <strong>{cityOrState}</strong> - {linkType} 🔗
        </a>
    </li>
</ul>
"""

# Use Streamlit components to render the HTML
components.html(links_html, height=100)