'use client'

import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { Inbox, Plus, Search } from 'lucide-react'

interface EmptyStateProps {
  title: string
  description: string
  icon?: React.ReactNode
  action?: {
    label: string
    onClick: () => void
  }
  secondaryAction?: {
    label: string
    onClick: () => void
  }
}

export function EmptyState({
  title,
  description,
  icon,
  action,
  secondaryAction,
}: EmptyStateProps) {
  return (
    <Card>
      <CardContent className="flex flex-col items-center justify-center py-12 px-6">
        <div className="mb-4 text-studio-medium">
          {icon || <Inbox className="h-12 w-12" />}
        </div>
        <h3 className="text-lg font-semibold text-studio-light mb-2">{title}</h3>
        <p className="text-sm text-studio-medium text-center max-w-md mb-6">{description}</p>
        {action && (
          <div className="flex gap-2">
            <Button onClick={action.onClick}>{action.label}</Button>
            {secondaryAction && (
              <Button variant="outline" onClick={secondaryAction.onClick}>
                {secondaryAction.label}
              </Button>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  )
}

