import { AlertTriangle } from 'lucide-react'
import { Button } from '@/components/Button'

export interface ErrorPageProps {
  /** 상단 메시지(굵게). 기본: 일반 오류 문구. */
  message?: string
  /** 보조 설명. 기본: 재시도 안내. */
  description?: string
  /** 재시도 버튼 핸들러. 없으면 버튼 미표시. */
  onRetry?: () => void
}

// 데이터 로드 실패(서버/네트워크 오류) 시 보여주는 에러 화면. 컨테이너를 가득 채운다(h-full).
export function ErrorPage({
  message = '문제가 발생했습니다.',
  description = '잠시 후 다시 시도해주세요.',
  onRetry,
}: ErrorPageProps) {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <div className="flex flex-col items-center gap-6 p-12">
        <div className="flex size-20 items-center justify-center rounded-full bg-destructive/10">
          <AlertTriangle className="size-10 text-destructive" />
        </div>
        <div className="flex flex-col items-center gap-2 text-center">
          <p className="title-2 text-destructive">{message}</p>
          <p className="body-1 text-neutral-70">{description}</p>
        </div>
        {onRetry && (
          <Button variant="primary" size="lg" onClick={onRetry}>
            다시 시도
          </Button>
        )}
      </div>
    </div>
  )
}