import { useParams } from 'react-router-dom'
import { GitBranch } from 'lucide-react'

function PedigreeView() {
  const { id } = useParams()

  return (
    <div className="container">
      <h1 style={{ marginBottom: '2rem' }}>Pedigree Chart</h1>
      <div className="card" style={{ textAlign: 'center', padding: '4rem' }}>
        <GitBranch size={64} style={{ color: 'var(--text-secondary)', margin: '0 auto 1rem' }} />
        <h2>Interactive Pedigree Visualization</h2>
        <p style={{ color: 'var(--text-secondary)', marginTop: '0.5rem' }}>Coming soon - React D3 Tree integration for dog ID: {id}</p>
      </div>
    </div>
  )
}

export default PedigreeView