"use client"

import { Calendar, Users, CheckSquare, Plus } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useContactsStore } from "@/lib/contacts/contacts-store"
import { cn } from "@/lib/utils"

export function RightPanel() {
  const { panelOpen, togglePanel } = useContactsStore()

  return (
    <aside className="hidden w-10 shrink-0 flex-col items-center gap-2 bg-transparent py-3 sm:flex">
      <Button variant="ghost" size="icon" className="h-9 w-9 text-gray-600 rounded-full">
        <Calendar className="h-4 w-4" />
      </Button>
      <Button variant="ghost" size="icon" className="h-9 w-9 text-gray-600 rounded-full">
        <CheckSquare className="h-4 w-4" />
      </Button>
      <Button
        variant="ghost"
        size="icon"
        className={cn(
          "h-9 w-9 rounded-full",
          panelOpen ? "bg-blue-100 text-[#1a73e8]" : "text-gray-600"
        )}
        onClick={togglePanel}
        aria-label="Contacts"
      >
        <Users className="h-4 w-4" />
      </Button>
      <div className="flex-1" />
      <Button variant="ghost" size="icon" className="h-9 w-9 text-gray-600 rounded-full">
        <Plus className="h-4 w-4" />
      </Button>
    </aside>
  )
}