import { Button } from "@/components/ui/button";
import React from "react";
import { type TDateRangeSegment } from "../../advanced-date-filter/schemas/advanced-date-filter.schema";

type TDateRangeSegmentProps = {
  handleDateRangeSegment: (value: TDateRangeSegment) => void;
  dateRangeSegmentValue?: TDateRangeSegment;
};

const DateSegment = ({
  handleDateRangeSegment,
  dateRangeSegmentValue,
}: TDateRangeSegmentProps) => {
  const segments = [
    { value: "today" as const, label: "Today" },
    { value: "this_week" as const, label: "This Week" },
    { value: "this_month" as const, label: "This Month" },
  ];

  return (
    <div className="flex gap-2.5 pb-2.5 border-b border-[#E9E9E9]">
      {segments.map(({ value, label }) => (
        <Button
          key={value}
          className="cursor-pointer"
          variant={dateRangeSegmentValue === value ? "outlineColor" : "outlineGray"}
          size="fixed"
          onClick={() => handleDateRangeSegment(value)}
        >
          {label}
        </Button>
      ))}
    </div>
  );
};

export default DateSegment;