import { Typography, Card, Button, Result } from 'antd';
import { CheckCircleOutlined } from '@ant-design/icons';
import { useNavigate, useSearchParams } from 'react-router-dom';

const { Paragraph } = Typography;

export default function PaymentSuccessPage() {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const sessionId = searchParams.get('session_id');

  return (
    <div style={{ maxWidth: 600, margin: '0 auto' }}>
      <Card>
        <Result
          icon={<CheckCircleOutlined style={{ color: '#52c41a' }} />}
          title="Payment Successful!"
          subTitle="Thank you for your support. Your transaction has been processed."
          extra={[
            <Button type="primary" key="gallery" onClick={() => navigate('/gallery')}>
              Browse Content
            </Button>,
            <Button key="home" onClick={() => navigate('/campaigns')}>
              Back to Home
            </Button>,
          ]}
        />
        {sessionId && (
          <Paragraph type="secondary" style={{ textAlign: 'center', fontSize: 12 }}>
            Reference: {sessionId.slice(0, 20)}...
          </Paragraph>
        )}
      </Card>
    </div>
  );
}
