'use client';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      height: '100vh',
      background: 'var(--md-sys-color-background)',
      padding: '20px'
    }}>
      <h2 style={{
        fontSize: '24px',
        fontWeight: '400',
        marginBottom: '16px',
        color: 'var(--md-sys-color-on-surface)'
      }}>
        Что-то пошло не так
      </h2>
      <p style={{
        fontSize: '14px',
        color: 'var(--md-sys-color-on-surface-variant)',
        marginBottom: '24px',
        textAlign: 'center'
      }}>
        {error.message || 'Произошла ошибка'}
      </p>
      <button
        onClick={reset}
        style={{
          padding: '12px 24px',
          background: 'var(--md-sys-color-primary)',
          color: 'var(--md-sys-color-on-primary)',
          border: 'none',
          borderRadius: '20px',
          cursor: 'pointer',
          fontSize: '14px',
          fontWeight: '500'
        }}
      >
        Попробовать снова
      </button>
    </div>
  );
}