import { Link } from "react-router-dom";

export function Villagebutton({ title, source, page }: { title: string; source: string; page:string}) {
  return (
    <Link className="btn village-style-button" role="button" to={page}>
      <img src={source} className="d-block mx-auto mb-2" alt=""></img>
      <h3>{title}</h3>
    </Link>
  )
}

export function Villbuttonrow(){
  return(
      <div className="row align-items-center bottom-buttons">
        <Villagebutton page="/human-practices" source="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" title="Human Practice"></Villagebutton>
        <Villagebutton page="/team" source="https://static.igem.wiki/teams/5247/design/icons/team.png" title="Team"></Villagebutton>
        <Villagebutton page="/experiments" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Experiments"></Villagebutton>
        <Villagebutton page="/description" source="https://static.igem.wiki/teams/5247/design/icons/dna.png" title="Description"></Villagebutton>
        <Villagebutton page="/engineering" source="https://static.igem.wiki/teams/5247/design/icons/genetic-engineering.png" title="Engineering"></Villagebutton>
        <Villagebutton page="/safety" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton>
        <Villagebutton page="/results" source="https://static.igem.wiki/teams/5247/design/icons/results.png" title="Results"></Villagebutton>
      
      </div>  
  )
}

export default Villbuttonrow; // Don’t forget to use export default!