import React from 'react';
import { weightStandardData } from '../mockData/weightStandardData.ts';

const WeightStandardPage: React.FC = () => {
  const { headers, data } = weightStandardData;

  return (
    <main className="px-4 sm:px-6 lg:px-8 pb-8">
      <div className="flex items-center mb-6">
        <i className="fa-solid fa-table-list text-3xl text-red-600 mr-4"></i>
        <div>
          <h1 className="text-3xl font-bold text-gray-800">Tabel Standar Bobot Ross 308</h1>
          <p className="mt-1 text-gray-600">
            Driven from pen trial data - so difference may be more
          </p>
        </div>
      </div>

      <div className="bg-white p-4 rounded-xl shadow-sm overflow-hidden">
        <div className="overflow-auto max-h-[calc(100vh-250px)]">
          <table className="min-w-full border-collapse text-sm">
            <thead className="bg-red-700 text-white sticky top-0 z-10">
              <tr>
                <th className="p-2 border border-red-800 font-semibold sticky left-0 bg-red-700 z-20">
                  DO/wt
                </th>
                {headers.map((header) => (
                  <th key={header} className="p-2 border border-red-800 font-semibold w-16">
                    {header}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {data.map((row, rowIndex) => (
                <tr key={rowIndex} className="even:bg-red-100/50">
                  <td className="p-1 border border-red-200 text-center bg-red-700 text-white font-semibold sticky left-0 z-10">
                    {row.day}
                  </td>
                  {row.values.map((value, colIndex) => {
                    const isRedText = (colIndex + 1) % 7 === 0;
                    return (
                      <td
                        key={colIndex}
                        className={`p-1 border border-red-200 text-center font-mono ${isRedText ? 'text-red-600 font-bold' : 'text-gray-800'}`}
                      >
                        {value}
                      </td>
                    );
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
      <div className="text-right mt-2 text-xs text-gray-500 font-semibold">AVIAGEN PROPRIETARY</div>
    </main>
  );
};

export default WeightStandardPage;