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

export default function UnderConstruction() {
  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: '20px', alignItems: 'center' }}>
        <div
          style={{
            width: '110px',
            height: '110px',
            borderRadius: '50%',
            backgroundColor: 'rgba(10, 19, 23, 0.08)',
            color: '#0A1317',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }}
        >
          <Construction size={56} />
        </div>
        <Heading level={2}>Under Construction</Heading>
        <div style={{ maxWidth: '460px' }}>
          <Text type="body" color="secondary">
            Hey! Please check out this site later. We are doing some maintenance on it right now.
          </Text>
        </div>
        <Button variant="primary" icon={<Home size={16} />} onClick={() => navigate('/dashboard')} label="Back To Home" />
      </div>
    </div>
  );
}