---
/**
* ServiceCard component displays a service with an icon and name
* @component
* @example
* ```astro
*
* ```
*/
interface Props {
/**
* The name of the service to display
*/
name: string;
/**
* The URL to link to when the service card is clicked
*/
href: string;
/**
* The URL of the service icon (light version)
*/
img: string;
/**
* The URL of the service icon for dark mode (dark version)
* If not provided, falls back to the light version
*/
imgDark?: string;
/**
* Alternative text for the service icon
*/
alt: string;
}
const { name, href, img, imgDark, alt } = Astro.props;
// Use the provided dark icon or fall back to the light icon
const darkIcon = imgDark || img;
// Generate a unique ID for the service card
const cardId = `service-card-${crypto.randomUUID().slice(0, 8)}`;
---
{name}