import React from "react";
import { cn } from "../lib/utils";

type ViewMode = 'daily' | 'weekly';

interface ViewToggleProps {
  viewMode: ViewMode;
  onToggle: (mode: ViewMode) => void;
  className?: string;
}

const ViewToggle: React.FC<ViewToggleProps> = ({ viewMode, onToggle, className }) => {
  return (
    <div className={cn("flex items-center gap-1 bg-muted rounded-lg p-1", className)}>
      <button
        onClick={() => onToggle('weekly')}
        className={cn(
          "px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200",
          viewMode === 'weekly'
            ? "bg-background text-foreground shadow-sm"
            : "text-muted-foreground hover:text-foreground"
        )}
      >
        Weekly
      </button>
      <button
        onClick={() => onToggle('daily')}
        className={cn(
          "px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200",
          viewMode === 'daily'
            ? "bg-background text-foreground shadow-sm"
            : "text-muted-foreground hover:text-foreground"
        )}
      >
        Daily
      </button>
    </div>
  );
};

export default ViewToggle;