Sidebar Card

"use client";

import type { ReactNode } from "react";
import { BarChart3, CalendarDays, CheckCircle2, Home, Sparkles, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SidebarCardProps {
  items?: { label: string; href: string; icon: LucideIcon }[];
  activeHref?: string;
  tip?: { title: string; text: string; cta: { label: string; href: string } };
  user?: { name: string; plan: string; emoji: string };
  children?: ReactNode;
  className?: string;
}

/** Floating white sidebar card with generous radius: logo, nav with lavender active pill, a butter “tip of the day” card and the user row at the bottom. */
export function SidebarCard({
  items = [
    { label: "Dashboard", href: "#dash", icon: Home },
    { label: "My tasks", href: "#tasks", icon: CheckCircle2 },
    { label: "Calendar", href: "#calendar", icon: CalendarDays },
    { label: "Reports", href: "#reports", icon: BarChart3 },
  ],
  activeHref = "#tasks",
  tip = { title: "Tip of the day", text: "Drag a task onto a day in the week view to schedule it.", cta: { label: "Try it", href: "#week" } },
  user = { name: "Tom Becker", plan: "Bloom plan", emoji: "🐻" },
  children,
  className,
}: SidebarCardProps) {
  return (
    <div className={cn("min-h-dvh bg-da-surface-2 text-da-fg lg:flex", className)}>
      <aside className="p-4 lg:sticky lg:top-0 lg:h-dvh">
        <div className="flex flex-col rounded-[32px] bg-da-surface p-5 shadow-da-md lg:h-full lg:w-64">
          <p className="flex items-center gap-2 font-da-display text-xl font-extrabold">
            <span aria-hidden className="flex -space-x-1.5">
              <span className="size-5 rounded-full bg-da-primary" />
              <span className="size-5 rounded-full bg-da-accent" />
            </span>
            Planta
          </p>
          <nav aria-label="Main" className="mt-6 lg:flex-1">
            <ul className="flex gap-1 overflow-x-auto lg:flex-col">
              {items.map((it) => {
                const active = it.href === activeHref;
                return (
                  <li key={it.href}>
                    <a
                      href={it.href}
                      aria-current={active ? "page" : undefined}
                      className={cn(
                        "da-focus da-transition flex h-11 items-center gap-3 rounded-da-pill px-4 text-[15px] font-medium whitespace-nowrap",
                        active ? "bg-da-primary/12 font-semibold text-da-fg" : "text-da-muted-fg hover:bg-da-surface-2",
                      )}
                    >
                      <it.icon aria-hidden className={cn("size-5", active && "text-da-primary")} />
                      {it.label}
                    </a>
                  </li>
                );
              })}
            </ul>
          </nav>
          <div className="mt-6 hidden rounded-da-lg bg-da-warning/25 p-4 lg:block">
            <p className="flex items-center gap-1.5 font-da-display font-extrabold">
              <Sparkles aria-hidden className="size-4" /> {tip.title}
            </p>
            <p className="mt-1 text-sm text-da-muted-fg">{tip.text}</p>
            <a href={tip.cta.href} className="da-focus mt-3 inline-flex rounded-da-pill bg-da-fg px-4 py-1.5 text-sm font-semibold text-da-bg">
              {tip.cta.label}
            </a>
          </div>
          <div className="mt-4 hidden items-center gap-3 lg:flex">
            <span aria-hidden className="grid size-10 place-items-center rounded-full bg-da-secondary text-xl">
              {user.emoji}
            </span>
            <span className="text-sm leading-tight">
              <span className="block font-semibold">{user.name}</span>
              <span className="text-da-muted-fg">{user.plan}</span>
            </span>
          </div>
        </div>
      </aside>
      <main className="min-w-0 flex-1">{children}</main>
    </div>
  );
}

export default SidebarCard;