'use client'

/**
 * ComingSoon - 統一的「建設中」佔位元件
 * ======================================
 * 用於尚未實作的路由頁面
 * Nothing.tech 極簡風格
 *
 * @created 2026-04-01 ogt
 */

import { type LucideIcon } from 'lucide-react'
import { cn } from '@/lib/utils'

interface ComingSoonProps {
  icon?: LucideIcon
  title: string
  description?: string
  className?: string
}

export function ComingSoon({ icon: Icon, title, description, className }: ComingSoonProps) {
  return (
    <div className={cn(
      'flex flex-col items-center justify-center min-h-[60vh] text-center',
      className
    )}>
      {Icon && (
        <div className="w-16 h-16 rounded-2xl bg-nothing-gray-100 flex items-center justify-center mb-5">
          <Icon className="w-8 h-8 text-nothing-gray-400" />
        </div>
      )}
      <h2 className="font-body text-lg font-bold text-nothing-gray-700 tracking-tight mb-2">
        {title}
      </h2>
      {description && (
        <p className="font-body text-sm text-nothing-gray-400 max-w-xs">
          {description}
        </p>
      )}
      <div className="mt-6 flex items-center gap-1.5">
        {[0, 1, 2].map(i => (
          <div
            key={i}
            className="w-1.5 h-1.5 rounded-full bg-nothing-gray-300 animate-pulse"
            style={{ animationDelay: `${i * 200}ms` }}
          />
        ))}
      </div>
    </div>
  )
}