import { Construction } from 'lucide-react'
import { Link } from 'react-router-dom'

import { AppShell } from '@/components/layout/AppShell'
import { Button, EmptyState } from '@/components/ui'

/**
 * An honest stand-in for a route that is planned but not built.
 *
 * It says what is missing rather than filling the screen with sample listings.
 * On a marketplace, mocked inventory or invented prices are not a harmless
 * placeholder -- someone will believe them.
 */
export function PlaceholderPage({
  title,
  description,
  phase,
}: {
  title: string
  description: string
  phase: string
}) {
  return (
    <AppShell>
      <div className="container-page py-16 lg:py-24">
        <EmptyState
          icon={<Construction className="size-5" />}
          title={title}
          description={`${description} (${phase})`}
          action={
            <div className="flex flex-wrap justify-center gap-3">
              <Link to="/">
                <Button variant="secondary">Back to home</Button>
              </Link>
              <Link to="/categories">
                <Button>Browse categories</Button>
              </Link>
            </div>
          }
        />
      </div>
    </AppShell>
  )
}