'use client';

import { ChevronLeft, ChevronRight } from 'lucide-react';
import { addCalendarDays } from '@/lib/appointmentTime';

interface ScheduleDayPickerProps {
  value: Date;
  onChange: (day: Date) => void;
  /** Optional lower bound; picker navigation is unrestricted for history browsing. */
  minDate?: Date;
  label?: string;
}

export function ScheduleDayPicker({ value, onChange, label = 'Schedule date' }: ScheduleDayPickerProps) {
  const labelText = value.toLocaleDateString(undefined, {
    weekday: 'short',
    month: 'short',
    day: 'numeric',
    year: 'numeric',
  });

  return (
    <div className="w-full max-w-md">
      <p className="text-sm font-medium text-text-secondary mb-2">{label}</p>
      <div className="flex items-center gap-1 rounded-[var(--radius-md)] border border-border bg-background-secondary/90 px-1 py-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.02)]">
        <button
          type="button"
          onClick={() => onChange(addCalendarDays(value, -1))}
          className="shrink-0 rounded-[var(--radius-sm)] p-2 text-text-muted hover:text-text-primary hover:bg-background-card/80 focus:outline-none focus:ring-2 focus:ring-primary/35"
          aria-label="Previous day"
        >
          <ChevronLeft className="h-4 w-4 icon-flat" />
        </button>
        <div className="flex-1 min-w-0 text-center text-sm font-medium text-text-primary tabular-nums px-2 py-1.5">
          {labelText}
        </div>
        <button
          type="button"
          onClick={() => onChange(addCalendarDays(value, 1))}
          className="shrink-0 rounded-[var(--radius-sm)] p-2 text-text-muted hover:text-text-primary hover:bg-background-card/80 focus:outline-none focus:ring-2 focus:ring-primary/35"
          aria-label="Next day"
        >
          <ChevronRight className="h-4 w-4 icon-flat" />
        </button>
      </div>
    </div>
  );
}