import { Box, Button, Typography } from '@mui/material'
import { CheckCircle } from 'lucide-react'
import { DS_TEXT } from '../../lib/ds'

interface Props {
  onViewListings: () => void
  onCreateAnother: () => void
}

export function CreatedScreen({ onViewListings, onCreateAnother }: Props) {
  return (
    <Box sx={{ maxWidth: 520, mx: 'auto', mt: 8, px: 3, textAlign: 'center' }}>
      <CheckCircle size={48} color={DS_TEXT.success} style={{ marginBottom: 16 }} />
      <Typography variant="h5" sx={{ fontWeight: 700, mb: 1 }}>Inserat erstellt</Typography>
      <Typography color="text.secondary" sx={{ mb: 3 }}>
        Das Inserat wurde veröffentlicht und ist für passende Suchanfragen sichtbar.
      </Typography>
      <Box sx={{ display: 'flex', gap: 2, justifyContent: 'center' }}>
        <Button variant="outlined" onClick={onViewListings}>
          Meine Inserate
        </Button>
        <Button variant="contained" sx={{ bgcolor: DS_TEXT.brand, '&:hover': { bgcolor: DS_TEXT.brandDark } }} onClick={onCreateAnother}>
          Weiteres Inserat
        </Button>
      </Box>
    </Box>
  )
}