import {type FunctionComponent} from 'react'
import {type IArtifact} from '@/models/IArtifact.ts'
import {AnvilIcon, MapPinIcon} from 'lucide-react'

const ArtifactPageLayout: FunctionComponent<IArtifact> = ({
  imageUrl,
  name,
  displayStatus,
  history,
  descriptions,
  era,
  material,
  origin,
}) => {
  return (
    <div className="artifact-detail">
      <img src={imageUrl} alt={name} />

      <div className="status">{displayStatus}</div>

      <div className="metadata">
        <div className="header">
          <div>
            <h2>{name}</h2>
            <p>
              {era} - {history}
            </p>
          </div>
        </div>
        <div className="detail-content">
          <strong>NL</strong>
          <p>{descriptions.NL}</p>
          <strong>EN</strong>
          <p>{descriptions.EN}</p>
          <strong>FR</strong>
          <p>{descriptions.FR}</p>

          <select>
            <option>-- Kies een display status --</option>
          </select>
        </div>
        <div className="footer">
          <div>
            <MapPinIcon /> {origin}
          </div>
          <div>
            <AnvilIcon /> {material}
          </div>
        </div>
        <div className="navigation-footer">
          <button>Go back</button>
        </div>
      </div>
    </div>
  )
}

export default ArtifactPageLayout
