import React from 'react'
import Link from 'next/link'

export function QuickActionCard({
  title,
  description,
  href,
  onClick,
  icon,
}: {
  title: string
  description: string
  href?: string
  onClick?: () => void
  icon: React.ReactNode
}) {
  const inner = (
    <>
      <div className="flex-shrink-0 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-blue-600 dark:text-blue-400">
        {icon}
      </div>
      <div>
        <h3 className="font-medium text-gray-900 dark:text-white">{title}</h3>
        <p className="text-sm text-gray-500 dark:text-gray-400">{description}</p>
      </div>
    </>
  )

  if (onClick) {
    return (
      <button
        onClick={onClick}
        className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 hover:shadow-md transition-shadow flex items-start gap-4 w-full text-left"
      >
        {inner}
      </button>
    )
  }

  return (
    <Link
      href={href!}
      className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 hover:shadow-md transition-shadow flex items-start gap-4"
    >
      {inner}
    </Link>
  )
}