interstellar_ai/app/components/History.tsx

import React, { useState } from 'react';

interface HistoryProps{
  selectedIndex: number;
  setSelectedIndex: (index: number) => void;
}

const History: React.FC<HistoryProps> = ({selectedIndex, setSelectedIndex}) => {

  const handleHistoryClick = (index: number) => {
    setSelectedIndex(index)
  }

  return (
    <div className="history-background">
      <div className="history">
        <ul>
          {/* Populate with history items */}
          {Array.from({ length: 20 }, (_, index) => (
            <li key={index}>
              <a href="#" onClick={()=>handleHistoryClick(index)}>history{index + 1}</a>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default History;