"use client"

import * as React from "react"
import { Button } from "@/components/ui/button"
import { TableIcon, LayoutGrid } from "lucide-react"

interface DataTableCompactToggleProps {
  /**
   * 현재 컴팩트 모드 상태
   */
  isCompact: boolean
  
  /**
   * 컴팩트 모드 토글 시 호출될 함수
   */
  onToggleCompact: () => void
}

export function DataTableCompactToggle({
  isCompact,
  onToggleCompact
}: DataTableCompactToggleProps) {
  return (
    <Button
      variant="ghost"
      size="sm"
      onClick={onToggleCompact}
      title={isCompact ? "확장 보기로 전환" : "컴팩트 보기로 전환"}
      className="h-8 px-2"
    >
      {isCompact ? <LayoutGrid size={16} /> : <TableIcon size={16} />}
      <span className="ml-2 text-xs">{isCompact ? "확장 보기" : "컴팩트 보기"}</span>
    </Button>
  )
}