import React from 'react'

const baseCard =
  'group rounded-xl border border-gray-700 bg-gray-800 p-4 shadow-lg transition hover:scale-[1.02] hover:border-cyan-500/40'

const actions = [
  {
    key: 'upload-artwork',
    label: 'Upload Artwork',
    href: '/upload',
    icon: 'fa-solid fa-cloud-arrow-up',
    description: 'Publish a new piece to your portfolio.',
  },
  {
    key: 'write-story',
    label: 'Write Story',
    href: '/creator/stories/create',
    icon: 'fa-solid fa-pen-nib',
    description: 'Create a story, tutorial, or showcase.',
  },
  {
    key: 'edit-profile',
    label: 'Edit Profile',
    href: '/settings/profile',
    icon: 'fa-solid fa-user-gear',
    description: 'Update your profile details and links.',
  },
  {
    key: 'notifications',
    label: 'View Notifications',
    href: '/messages',
    icon: 'fa-solid fa-bell',
    description: 'Catch up with mentions and updates.',
  },
]

export default function QuickActions({ isCreator }) {
  return (
    <section className="rounded-xl border border-gray-700 bg-gray-800 p-5 shadow-lg">
      <div className="mb-4 flex items-center justify-between">
        <h2 className="text-xl font-semibold">Quick Actions</h2>
        <span className="rounded-full border border-gray-600 px-2 py-1 text-xs text-gray-300">
          {isCreator ? 'Creator mode' : 'User mode'}
        </span>
      </div>

      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
        {actions.map((action) => (
          <a key={action.key} href={action.href} className={baseCard}>
            <div className="flex items-start gap-3">
              <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 text-cyan-300">
                <i className={action.icon} aria-hidden="true" />
              </span>
              <div>
                <p className="text-sm font-semibold text-white">{action.label}</p>
                <p className="mt-1 text-xs text-gray-300">{action.description}</p>
              </div>
            </div>
          </a>
        ))}
      </div>
    </section>
  )
}