"use client"

import * as React from "react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Infinity, Grid3X3, RotateCcw } from "lucide-react"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

interface ViewModeToggleProps {
  isInfiniteMode: boolean
  onSwitch: (pageSize: number) => void 
  className?: string
}

export function ViewModeToggle({ isInfiniteMode, onSwitch, className }: ViewModeToggleProps) {

  const switchToPagination = React.useCallback(() => {
       onSwitch(10)
   }, [onSwitch])



  // 새로고침
  const handleRefresh = React.useCallback(() => {
    window.location.reload()
  }, [])

  return (
    <div className={`flex items-center gap-2 ${className}`}>
      {/* 현재 모드 표시 */}
      <div className="flex items-center gap-2">
        {isInfiniteMode && (
          <Badge variant="default" className="bg-blue-100 text-blue-800 hover:bg-blue-200">
            <Infinity className="h-3 w-3 mr-1" />
            무한 스크롤 모드
          </Badge>
        ) }
      </div>

      {/* 모드 전환 버튼 */}
      <div className="flex items-center gap-1">
        {isInfiniteMode && (
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={switchToPagination}
                  className="h-8 px-2"
                >
                  <Grid3X3 className="h-4 w-4 mr-1" />
                  페이지 모드
                </Button>
              </TooltipTrigger>
              <TooltipContent>
                <p>페이지네이션 모드로 전환 (20개씩 표시)</p>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        ) }

        {/* 새로고침 버튼 */}
        {isInfiniteMode   && (
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                variant="ghost"
                size="sm"
                onClick={handleRefresh}
                className="h-8 w-8 p-0"
              >
                <RotateCcw className="h-4 w-4" />
              </Button>
            </TooltipTrigger>
            <TooltipContent>
              <p>새로고침</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
        )}
      </div>
    </div>
  )
}