import { useNavigate } from 'react-router-dom';
import { Button } from '@astryxdesign/core/Button';
import { Text, Heading } from '@astryxdesign/core/Text';
import { Home } from 'lucide-react';

export default function Error404() {
  const navigate = useNavigate();

  return (
    <div
      style={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '24px',
        textAlign: 'center',
        backgroundColor: '#f8fafc',
        fontFamily: 'system-ui, sans-serif'
      }}
    >
      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', alignItems: 'center' }}>
        <span style={{ fontWeight: 900, fontSize: 'clamp(3.5rem, 18vw, 8rem)', lineHeight: 1, color: '#0A1317' }}>
          404
        </span>
        <div style={{ width: '64px', height: '4px', borderRadius: '2px', backgroundColor: '#0A1317' }} />
        <Heading level={2}>Page Not Found</Heading>
        <div style={{ maxWidth: '460px' }}>
          <Text type="body" color="secondary">
            The page you are looking for was moved, removed, renamed, or might never exist!
          </Text>
        </div>
        <Button variant="primary" icon={<Home size={16} />} onClick={() => navigate('/dashboard')} label="Back To Home" />
      </div>
    </div>
  );
}