"use client"

import { Grid3X3, List } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useDriveSettingsStore } from "@/lib/stores/drive-settings-store"
import { cn } from "@/lib/utils"

export function DriveViewModeToggle() {
  const viewMode = useDriveSettingsStore((s) => s.viewMode)
  const setViewMode = useDriveSettingsStore((s) => s.setViewMode)

  return (
    <div
      className="flex shrink-0 items-center rounded-full border border-mail-border-subtle bg-mail-surface-muted p-0.5"
      role="group"
      aria-label="Mode d’affichage"
    >
      <Button
        type="button"
        variant="ghost"
        size="icon"
        className={cn(
          "h-7 w-7 rounded-full",
          viewMode === "list" && "bg-mail-surface shadow-sm"
        )}
        onClick={() => setViewMode("list")}
        aria-pressed={viewMode === "list"}
      >
        <List className="h-4 w-4 text-[#5f6368]" />
      </Button>
      <Button
        type="button"
        variant="ghost"
        size="icon"
        className={cn(
          "h-7 w-7 rounded-full",
          viewMode === "grid" && "bg-mail-surface shadow-sm"
        )}
        onClick={() => setViewMode("grid")}
        aria-pressed={viewMode === "grid"}
      >
        <Grid3X3 className="h-4 w-4 text-[#5f6368]" />
      </Button>
    </div>
  )
}