"use client";

import { Slider } from "@/components/ui/Slider";

interface DurationStepProps {
  duration: number;
  onChange: (min: number) => void;
}

export function DurationStep({ duration, onChange }: DurationStepProps) {
  return (
    <div>
      <h2 className="text-2xl font-bold text-zinc-100 mb-2">
        Workout Duration
      </h2>
      <p className="text-zinc-400 mb-10">
        How long do you want each workout to be? This is the total time
        including warm-up, working sets, and rest periods.
      </p>

      {/* Big centered display */}
      <div className="flex flex-col items-center justify-center py-12">
        <div className="text-7xl font-bold text-accent tabular-nums mb-2">
          {duration}
        </div>
        <div className="text-lg text-zinc-400">minutes</div>
      </div>

      {/* Slider */}
      <div className="max-w-md mx-auto">
        <Slider
          min={20}
          max={90}
          value={duration}
          onChange={onChange}
          step={5}
          label="Duration"
          unit="min"
        />
      </div>

      {/* Duration guide */}
      <div className="mt-10 grid grid-cols-3 gap-4 text-center">
        <div>
          <div className="text-sm font-medium text-zinc-300">Quick</div>
          <div className="text-xs text-zinc-500">20-30 min</div>
        </div>
        <div>
          <div className="text-sm font-medium text-zinc-300">Standard</div>
          <div className="text-xs text-zinc-500">40-60 min</div>
        </div>
        <div>
          <div className="text-sm font-medium text-zinc-300">Extended</div>
          <div className="text-xs text-zinc-500">70-90 min</div>
        </div>
      </div>
    </div>
  );
}