"use client"

import { BookOpen } from "lucide-react"
import { Button } from "@/components/ui/button"

interface DailyLogEmptyStateProps {
  onAddFirst: () => void
}

export function DailyLogEmptyState({ onAddFirst }: DailyLogEmptyStateProps) {
  return (
    <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
      <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-4">
        <BookOpen className="w-8 h-8 text-primary" />
      </div>
      <h3 className="text-lg font-semibold text-gray-900 mb-2">
        Comienza tu diario
      </h3>
      <p className="text-gray-600 mb-6 max-w-md">
        Registra cómo te sientes cada día y lleva un seguimiento de tu bienestar.
        Identifica patrones y mejora tu salud mental.
      </p>
      <Button onClick={onAddFirst}>
        Crear mi primer registro
      </Button>
    </div>
  )
}