import { ComponentTableOne, Maybe, Table } from "@/type/gpl/graphql";
import s from "./index.module.scss";

interface Props {
  param: Maybe<ComponentTableOne> | undefined;
}

export default function tableOne({ param }: Props) {
  return (
    <>
      <div className={s.content}>
        <div className={s.center}>
          <table>
            <thead>
              {param?.thead?.tr?.map((item, index) => {
                return (
                  <tr key={index}>
                    {item?.td?.map((it, i) => {
                      return <th key={i}>{it?.text}</th>;
                    })}
                  </tr>
                );
              })}
            </thead>
            <tbody>
              {param?.tbody?.tr?.map((item, index) => {
                return (
                  <tr>
                    {item?.td?.map((it,i)=>{
                        return (
                             <td key={i}>{it?.text}</td>
                        )
                    })}
                
                  </tr>
                );
              })}

             
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

.content {
  width: 100%;
  overflow-x: scroll;
  .center {
    display: flex;
    justify-content: center;

    table {
      border-collapse: collapse;   // 让相邻边框合并成一条
      width: 100%;
    //   max-width: 800px;            // 可选，控制表格最大宽度
      border: 1px solid var(--border-color);   // 表格外边框

      thead {
        tr {
          th {
            white-space: nowrap;
            color: #fff;
            background-color: var(--primary-color);  // 表头底色
            font-weight: 600;
            text-align: left;
            padding: 12px 16px;
            border: 1px solid var(--border-color);  // 表头单元格边框
          }
        }
      }

      tbody {
        tr {

          td {
            
            padding: 12px 16px;
            border: 1px solid var(--border-color);  // 数据单元格边框
          }

          &:hover {
            background-color: var(--primary-color);  // 可选：鼠标悬停高亮
            color:#fff;
          }
        }
      }
    }
  }
}