import { PackageOpen } from 'lucide-react'
import { Link } from 'react-router-dom'

interface EmptyStateProps {
  title?: string
  message?: string
  actionText?: string
  actionLink?: string
  actionClick?: () => void
}

export default function EmptyState({ 
  title = 'Nothing found',
  message = 'We could not find any items here.',
  actionText = 'Browse Shop',
  actionLink,
  actionClick
}: EmptyStateProps) {
  const ButtonContent = () => (
    <span className="inline-block mt-6 px-8 py-3 bg-spa-forest text-white rounded-xl text-sm font-bold uppercase tracking-widest hover:bg-spa-stone hover:shadow-lg transition-all cursor-pointer">
      {actionText}
    </span>
  )

  return (
    <div className="flex flex-col items-center justify-center space-y-4 text-center p-12 bg-white border border-spa-stone/10 rounded-2xl shadow-sm max-w-lg mx-auto my-8">
      <div className="w-16 h-16 bg-spa-sage/30 rounded-full flex items-center justify-center mb-2">
        <PackageOpen className="w-8 h-8 text-spa-forest" />
      </div>
      <h3 className="text-xl font-bold text-pop-black">{title}</h3>
      <p className="text-spa-stone">{message}</p>
      
      {actionClick ? (
        <div onClick={actionClick}><ButtonContent /></div>
      ) : actionLink ? (
        <Link to={actionLink}><ButtonContent /></Link>
      ) : null}
    </div>
  )
}