import { blue } from '../../lib/constant';
import { Source } from '../../lib/types';
import EmptySourcesList from '../emptyList';
import SectionTitle from './SectionTitle';

export default function SourcesList({ sources }: { sources: Source[] }) {
  return (
    <>
      <SectionTitle>Manbalar ro&apos;yxati</SectionTitle>
      {sources.length > 0 ? (
        <div className="mb-5">
          <table className="w-full text-sm">
            <thead>
              <tr style={{ borderBottom: `0.5px solid ${blue[100]}` }}>
                <th
                  className="text-left pb-2 font-medium"
                  style={{ color: blue[600] }}
                >
                  URL
                </th>
                <th
                  className="text-right pb-2 font-medium"
                  style={{ color: blue[600] }}
                >
                  Modul
                </th>
              </tr>
            </thead>
            <tbody>
              {sources.map((s, i) => (
                <tr
                  key={s.url}
                  style={{ borderBottom: `0.5px solid ${blue[50]}` }}
                >
                  <td className="py-1.5 pr-4">
                    <div className="flex items-center gap-2">
                      <div
                        className="w-1.5 h-1.5 rounded-full shrink-0"
                        style={{ background: i < 3 ? blue[900] : blue[200] }}
                      />
                      <span
                        className="text-[12px] truncate max-w-95 block"
                        style={{ color: blue[800] }}
                      >
                        {s.url}
                      </span>
                    </div>
                  </td>
                  <td
                    className="py-1.5 text-right text-[12px] whitespace-nowrap"
                    style={{ color: blue[600] }}
                  >
                    {s.module}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : (
        <EmptySourcesList />
      )}
    </>
  );
}