"use client"

import Image from "next/image"

import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"

interface SidebarBrandProps {
  logoSrc: string
  logoAlt: string
  title: string
  subtitle: string
}

export function SidebarBrand({ logoSrc, logoAlt, title, subtitle }: SidebarBrandProps) {
  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton
          asChild
          size="lg"
          className="cursor-default select-none hover:bg-transparent hover:text-inherit active:bg-transparent active:text-inherit focus-visible:ring-0"
        >
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg">
              <Image
                src={logoSrc}
                alt={logoAlt}
                width={40}
                height={40}
                className="h-10 w-10 object-contain"
                priority
              />
            </div>
            <div className="flex flex-col gap-0.5 leading-none">
              <span className="font-medium">{title}</span>
              <span className="text-xs text-muted-foreground">{subtitle}</span>
            </div>
          </div>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  )
}