'use client';

import * as React from 'react';
import { Timer } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';

interface DurationPickerProps {
  duration: number; // Duration in minutes
  setDuration: (duration: number) => void;
  label?: string;
  isDark?: boolean;
  options?: number[]; // Optional custom duration options
}

export function DurationPicker({ 
  duration, 
  setDuration, 
  label, 
  isDark = false,
  options = [15, 30, 45, 60, 120] 
}: DurationPickerProps) {
  // Format duration display
  const formatDuration = (minutes: number) => {
    if (minutes < 60) {
      return `${minutes}m`;
    }
    const hours = Math.floor(minutes / 60);
    const mins = minutes % 60;
    return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
  };

  const displayDuration = duration ? formatDuration(duration) : 'Select duration';

  return (
    <div className="space-y-3">
      {label && (
        <label className={cn(
          "text-sm font-semibold",
          isDark ? "text-gray-300" : "text-gray-700"
        )}>
          {label}
        </label>
      )}
      <div className="flex flex-wrap gap-2">
        {options.map((option) => {
          const isSelected = duration === option;
          return (
            <button
              key={option}
              type="button"
              onClick={() => setDuration(option)}
              className={cn(
                "px-4 py-3 rounded-lg text-sm font-medium transition-all min-w-[80px]",
                isSelected
                  ? isDark
                    ? "bg-blue-600 text-white shadow-md"
                    : "bg-blue-600 text-white shadow-md"
                  : isDark
                  ? "bg-gray-800 text-gray-300 hover:bg-gray-700 border border-gray-600"
                  : "bg-white text-gray-700 hover:bg-gray-50 border border-gray-200"
              )}
            >
              {formatDuration(option)}
            </button>
          );
        })}
      </div>
    </div>
  );
}