import React, { useEffect } from 'react';
import { Text, Title } from '@mantine/core';
import { useSelector, useDispatch } from "react-redux";
import { fetchSettings } from "../../Settings/store/settingSlice";
import { translate } from '../../../utils/i18n';

const TaskHeader = () => {
  const dispatch = useDispatch();
  const { serialSettings } = useSelector((state) => state.settings.setting);

  useEffect(() => {
    if (!serialSettings) {
      dispatch(fetchSettings());
    }
  }, [dispatch]);


  return (
    <>
      <div className="border border-b-0 rounded-t-xl px-3 py-3 bg-white">
        <div className="flex">
          {serialSettings && serialSettings.enabled && (
            <div className="text-base font-medium w-[6%] ml-3">
              <Text c="dimmed" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Ref.#')}</Text>
            </div>
          )}
          <div className="text-base font-medium w-[25%]">
            <Text c="dimmed" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Task Name')}</Text>
          </div>
          <div className="text-base font-medium w-[12%] flex">
            <Text c="dimmed" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Assigned')}</Text>
          </div>
          <div className="text-base font-medium w-[12%] flex justify-center">
            <Text c="dimmed" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Due Date')}</Text>
          </div>
          <div className="text-base font-medium w-[12%] flex justify-center">
            <Text c="dimmed" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Priority')}</Text>
          </div>
          <div className="text-base font-medium w-[12%] flex justify-center">
            <Text c="dimmed" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Status')}</Text>
          </div>
          <div className="text-base font-medium w-[26%] flex">
            <Text c="dimmed" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Tags')}</Text>
          </div>
        </div>
      </div>
    </>
  );
};

export default TaskHeader;