import React, { useEffect } from 'react';
import { useDevStore } from './store';
import { Card, CardContent } from '@mui/material';

export const App = () => {
  const store = useDevStore();
  useEffect(() => {
    store.getList();
  }, []);
  return (
    <div className='bg-slate-200 p-4 w-full h-full'>
      {store.list.map((item) => {
        const data = item.data;
        return (
          <Card key={item.id} className='w-[600px]' style={{ marginBottom: '16px' }}>
            <CardContent>
              <div className='relative group' style={{ fontWeight: 'bold', marginBottom: '8px' }}>
                <div>Code</div>
                <div className='hidden group-hover:block absolute z-10 top-0 left-0 rounded-lg'>
                  <div className='bg-slate-100 p-2 rounded-md whitespace-pre-wrap'>{data.code}</div>
                </div>
              </div>
              <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>Type</div>
              <div style={{ marginBottom: '8px' }}>{data.type}</div>
              <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>CWD</div>
              <div style={{ marginBottom: '8px' }}>{data.cwd}</div>
              <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>Status</div>
              <div style={{ marginBottom: '8px' }}>{data.status}</div>
              <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>Code Hash</div>
              <div style={{ marginBottom: '8px' }}>{data.codeHash}</div>
              <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>Code Path</div>
              <div style={{ marginBottom: '8px' }}>{data.codePath}</div>
              <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>Command</div>
              <div style={{ marginBottom: '8px' }}>{data.command}</div>
              <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>Code Status</div>
              <div style={{ marginBottom: '8px' }}>{data.codeStatus}</div>
            </CardContent>
          </Card>
        );
      })}
    </div>
  );
};

export default App;