import React from 'react'

const baseCard =
  'group rounded-2xl border border-white/10 bg-[#0b1826]/85 p-4 shadow-lg shadow-black/20 transition hover:-translate-y-0.5 hover:border-sky-300/35 hover:bg-[#102033]'

export default function QuickActions({ isCreator, receivedCommentsCount = 0, onNavigate }) {
  const actions = [
    {
      key: 'edit-profile',
      label: 'Edit Profile',
      href: '/dashboard/profile',
      icon: 'fa-solid fa-user-gear',
      description: 'Refresh your bio, socials, avatar, and country details.',
    },
    {
      key: 'received-comments',
      label: 'Review Feedback',
      href: '/dashboard/comments/received',
      icon: 'fa-solid fa-inbox',
      description: 'Read the latest comments left on your work.',
      badge: receivedCommentsCount > 0 ? `${receivedCommentsCount} new` : null,
    },
    {
      key: 'notifications',
      label: 'Open Notifications',
      href: '/dashboard/notifications',
      icon: 'fa-solid fa-bell',
      description: 'Catch up on mentions, replies, and updates.',
    },
    ...(isCreator
      ? [
          {
            key: 'manage-artworks',
            label: 'Manage Artworks',
            href: '/dashboard/artworks',
            icon: 'fa-solid fa-layer-group',
            description: 'Edit titles, details, and the presentation of your portfolio.',
          },
          {
            key: 'write-story',
            label: 'Write Story',
            href: '/creator/stories/create',
            icon: 'fa-solid fa-pen-nib',
            description: 'Publish a tutorial, devlog, showcase, or announcement.',
          },
          {
            key: 'open-studio',
            label: 'Open Studio',
            href: '/studio',
            icon: 'fa-solid fa-compass-drafting',
            description: 'Jump into the wider creator workspace and analytics tools.',
          },
          {
            key: 'creator-stories',
            label: 'Story Dashboard',
            href: '/creator/stories',
            icon: 'fa-solid fa-newspaper',
            description: 'Review creator stories, drafts, and publishing flow in one place.',
          },
        ]
      : [
          {
            key: 'upload-artwork',
            label: 'Upload Artwork',
            href: '/upload',
            icon: 'fa-solid fa-cloud-arrow-up',
            description: 'Start publishing and unlock more creator-focused dashboard tools.',
          },
          {
            key: 'explore-trending',
            label: 'Explore Trending',
            href: '/discover/trending',
            icon: 'fa-solid fa-fire-flame-curved',
            description: 'Browse what is hot right now to spot styles and creators worth following.',
          },
          {
            key: 'find-creators',
            label: 'Find Creators',
            href: '/creators/top',
            icon: 'fa-solid fa-user-group',
            description: 'Discover artists to follow and build a stronger feed around your taste.',
          },
          {
            key: 'saved-favorites',
            label: 'Open Favorites',
            href: '/dashboard/favorites',
            icon: 'fa-solid fa-bookmark',
            description: 'Revisit saved work and start shaping your own inspiration library.',
          },
        ]),
  ]

  return (
    <section className="rounded-[28px] border border-white/10 bg-[#08111c]/90 p-5 shadow-2xl shadow-black/20 sm:p-6">
      <div className="mb-5 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <p className="text-[11px] uppercase tracking-[0.24em] text-sky-200/80">Quick Actions</p>
          <h2 className="mt-2 text-xl font-semibold text-white">Start something useful right now</h2>
        </div>
        <span className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs uppercase tracking-[0.16em] text-slate-300">
          {isCreator ? 'Creator Mode' : 'Member Mode'}
        </span>
      </div>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
        {actions.map((action) => (
          <a key={action.key} href={action.href} onClick={() => onNavigate?.(action.href, action.label)} className={baseCard}>
            <div className="flex items-start gap-3">
              <span className="inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-sky-200">
                <i className={action.icon} aria-hidden="true" />
              </span>
              <div className="min-w-0 flex-1">
                <div className="flex items-center justify-between gap-2">
                  <p className="text-sm font-semibold text-white">{action.label}</p>
                  {action.badge ? (
                    <span className="rounded-full border border-sky-300/20 bg-sky-400/10 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.12em] text-sky-100">
                      {action.badge}
                    </span>
                  ) : null}
                </div>
                <p className="mt-2 text-sm leading-6 text-slate-300">{action.description}</p>
              </div>
            </div>
          </a>
        ))}
      </div>
    </section>
  )
}