import { useNavigate } from 'react-router-dom'
import { Plus, Play, BookOpen, UserPlus } from 'lucide-react'

const ACTIONS = [
  { icon: Plus, label: 'New Flow', description: 'Create a new flow', href: '/trees/new', color: '#06b6d4' },
  { icon: Play, label: 'Resume Session', description: 'Continue where you left off', href: '/sessions', color: '#34d399' },
  { icon: BookOpen, label: 'Browse Library', description: 'Explore step library', href: '/step-library', color: '#fbbf24' },
  { icon: UserPlus, label: 'Invite Team', description: 'Add team members', href: '/account', color: '#06b6d4' },
] as const

export function QuickActions() {
  const navigate = useNavigate()

  return (
    <div className="glass-card-static flex flex-col h-full">
      <div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
        <h3 className="font-heading text-sm font-bold text-foreground">Quick Actions</h3>
      </div>
      <div className="flex-1 flex flex-col justify-between p-3 gap-2">
        {ACTIONS.map(({ icon: Icon, label, description, href, color }) => (
          <button
            key={label}
            onClick={() => navigate(href)}
            className="glass-card flex items-center gap-3 px-4 py-3 text-left"
          >
            <span
              className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
              style={{ background: `${color}15` }}
            >
              <Icon size={18} style={{ color }} />
            </span>
            <div className="min-w-0">
              <div className="text-sm font-medium text-foreground">{label}</div>
              <div className="text-[0.6875rem] text-muted-foreground truncate">{description}</div>
            </div>
          </button>
        ))}
      </div>
    </div>
  )
}
