import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const timeRangeOptions = [
  { value: "today", label: "Today" },
  { value: "yesterday", label: "Yesterday" },
  { value: "last7days", label: "Last 7 Days" },
  { value: "last30days", label: "Last 30 Days" },
  { value: "last90days", label: "Last 90 Days" },
];

export const TimeRangeSelect = ({
  value,
  onChange,
  className,
  allowedRanges = [],
}) => {
  const filteredOptions = allowedRanges.length
    ? timeRangeOptions.filter((option) => allowedRanges.includes(option.value))
    : timeRangeOptions;

  console.log("Allowed Ranges prop:", allowedRanges); // Debugging line
  console.log("Filtered Options:", filteredOptions); // Debugging line

  return (
    <Select value={value} onValueChange={onChange}>
      <SelectTrigger className={className}>
        <SelectValue placeholder="Select time range" />
      </SelectTrigger>
      <SelectContent>
        {filteredOptions.map((option) => (
          <SelectItem key={option.value} value={option.value}>
            {option.label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
};
