import {
  RecordLeaveInput,
  RecordTimesheetInput,
} from "@/app/api/timesheets/actions";
import React from "react";
import { useFormContext } from "react-hook-form";
import { LeaveType } from "@/app/api/timesheets";
import MobileLeaveEntry from "./MobileLeaveEntry";
import DateHoursList from "../DateHoursTable/DateHoursList";

interface Props {
  leaveTypes: LeaveType[];
  timesheetRecords: RecordTimesheetInput;
}

const MobileLeaveTable: React.FC<Props> = ({
  timesheetRecords,
  leaveTypes,
}) => {
  const { watch } = useFormContext<RecordLeaveInput>();
  const currentInput = watch();
  const days = Object.keys(currentInput);

  return (
    <DateHoursList
      days={days}
      leaveEntries={currentInput}
      timesheetEntries={timesheetRecords}
      EntryComponent={MobileLeaveEntry}
      entryComponentProps={{ leaveTypes }}
    />
  );
};

export default MobileLeaveTable;