'use client';

import React from 'react';
import styled from 'styled-components';
import { theme } from '@/styles/theme';

interface Session {
  name: string;
  modified: string;
  size: string;
}

const Table = styled.table`
  width: 100%;
  border-collapse: collapse;
`;

const Th = styled.th`
  text-align: left;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
`;

const Td = styled.td`
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
`;

const Tr = styled.tr`
  &:last-child td { border-bottom: none; }
  &:hover td { background: rgba(240,246,252,0.03); }
`;

const SessionName = styled.code`
  color: #58A6FF;
  font-family: monospace;
  font-size: 12px;
`;

const Empty = styled.div`
  padding: 32px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
`;

export default function SessionList({ sessions }: { sessions: Session[] }) {
  if (!sessions.length) return <Empty>세션 기록 없음</Empty>;

  return (
    <Table>
      <thead>
        <tr>
          <Th>세션 ID</Th>
          <Th>마지막 수정</Th>
          <Th>크기</Th>
        </tr>
      </thead>
      <tbody>
        {sessions.map((s, i) => (
          <Tr key={i}>
            <Td><SessionName>{s.name}</SessionName></Td>
            <Td>{s.modified}</Td>
            <Td>{s.size}B</Td>
          </Tr>
        ))}
      </tbody>
    </Table>
  );
}