---
export interface ServiceProps {
  serviceName: string;
  serviceUrl?: string;
}

const { serviceName, serviceUrl } = Astro.props;

const formattedName = serviceName.toLowerCase().replace(/\s+/g, "-");

const svgFile = `/icons/${formattedName}.svg`;

const defaultDomain = "home.arpa";
const href = serviceUrl ?? `https://${formattedName}.${defaultDomain}`;
---

<a href={href} target="_blank" rel="noopener noreferrer" aria-label={`Open ${serviceName}`}>
  <div class="flex items-center space-x-2 p-4 bg-neutral-700 rounded-lg shadow-md hover:bg-neutral-600 transition">
    <div>
      <img src={svgFile} alt={`${serviceName} icon`} class="sm:w-12 w-10 aspect-square" />
    </div>
    <span>{serviceName}</span>
  </div>
</a>