components/parts/error-display.tsx

'use client';

import { Button } from '@/components/ui/button';
import { AlertTriangle, ChevronLeft, RefreshCw } from 'lucide-react';

interface ErrorDisplayProps {
  error: string;
  onBack?: () => void;
  onRetry?: () => void;
  backButtonText?: string;
  retryButtonText?: string;
  showBackButton?: boolean;
}

export function ErrorDisplay({
  error,
  onBack,
  onRetry,
  backButtonText = '戻る',
  retryButtonText = '再試行',
  showBackButton = true,
}: ErrorDisplayProps) {
  return (
    <div className="flex min-h-[400px] flex-col items-center justify-center p-8">
      <div className="mx-auto max-w-md text-center">
        <AlertTriangle className="mx-auto mb-4 h-16 w-16 text-red-500" />
        <h2 className="mb-2 text-2xl font-semibold text-gray-900">エラーが発生しました</h2>
        <p className="mb-6 text-gray-600">{error && <span className="mt-2 block text-sm text-gray-500">{error}</span>}</p>
        <div className="flex justify-center gap-3">
          {showBackButton && onBack && (
            <Button
              onClick={onBack}
              className="flex h-10 min-w-[120px] cursor-pointer items-center justify-center gap-2 rounded-full border-[1px] border-[#CCCCCC] bg-white px-6 text-[12px] font-semibold text-[#212121] shadow-none hover:bg-[#EEEEEE] hover:text-[#212121]"
            >
              <ChevronLeft className="h-4 w-4" />
              {backButtonText}
            </Button>
          )}
          {onRetry && (
            <Button
              onClick={onRetry}
              className="flex h-10 min-w-[120px] cursor-pointer items-center justify-center gap-2 rounded-full bg-[#212121] px-6 text-[12px] font-semibold text-white shadow-none hover:bg-[#212121E5]"
            >
              <RefreshCw className="h-4 w-4" />
              {retryButtonText}
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}