import React, { useState, useEffect } from 'react';

const LocalStorageApp = () => {
  const [key, setKey] = useState('');
  const [value, setValue] = useState('');
  const [allItems, setAllItems] = useState([]);

  useEffect(() => {
    loadAllItems();
  }, []);

  const loadAllItems = () => {
    const items = [];
    for (let i = 0; i < localStorage.length; i++) {
      const key = localStorage.key(i);
      const value = localStorage.getItem(key);
      items.push({ key, value });
    }
    setAllItems(items);
  };

  const checkLocalStorage = () => {
    const storedValue = localStorage.getItem(key);
    setValue(storedValue !== null ? storedValue : 'No value found');
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>Local Storage Checker</h1>
      <div style={{ marginBottom: '20px' }}>
        <label>
          Key: 
          <input 
            type="text" 
            value={key} 
            onChange={(e) => setKey(e.target.value)} 
            style={{ marginLeft: '10px', padding: '5px' }}
          />
        </label>
        <button 
          onClick={checkLocalStorage} 
          style={{ marginLeft: '10px', padding: '5px 10px' }}
        >
          Check
        </button>
      </div>
      <div>
        <strong>Value:</strong> {value}
      </div>
      <h2>All Local Storage Items</h2>
      <table border="1" cellPadding="10" cellSpacing="0" style={{ width: '100%', marginTop: '20px' }}>
        <thead>
          <tr>
            <th>Key</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody>
          {allItems.map((item, index) => (
            <tr key={index}>
              <td>{item.key}</td>
              <td>{item.value}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default LocalStorageApp;