export declare const cardTemplate = "\"use client\";\nimport Link from \"next/link\";\nimport styled, { css } from \"styled-components\";\nimport { styledText } from \"cherry-styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { Icon, IconProps } from \"@/components/layout/Icon\";\nimport { interactiveStyles } from \"@/components/layout/SharedStyled\";\n\nconst cardStyles = css<{ theme: Theme }>`\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  margin: 0;\n  ${({ theme }) => styledText(theme)}\n  color: ${({ theme }) => theme.colors.grayDark};\n\n  /* Tints the optional leading icon. Set here rather than through lucide's\n     color prop, because that becomes an SVG presentation attribute and CSS\n     custom properties do not resolve in those. */\n  & > svg.lucide {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nconst StyledCard = styled.div<{ theme: Theme }>`\n  ${cardStyles}\n`;\n\nconst StyledCardLink = styled(Link)<{ theme: Theme }>`\n  ${interactiveStyles};\n  ${cardStyles}\n  text-decoration: none;\n`;\n\nconst StyledCardTitle = styled.p<{ theme: Theme }>`\n  font-weight: bold;\n  margin: 0;\n  color: ${({ theme }) => theme.colors.dark};\n  ${({ theme }) => styledText(theme)};\n`;\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  title?: string;\n  icon?: IconProps;\n  href?: string;\n}\n\nfunction Card({ children, title, icon, href }: CardProps) {\n  const content = (\n    <>\n      {icon && <Icon name={icon} />}\n      {title && <StyledCardTitle>{title}</StyledCardTitle>}\n      {children}\n    </>\n  );\n\n  if (href) {\n    const isExternal = /^(https?:)?\\/\\//i.test(href);\n    return (\n      <StyledCardLink\n        href={href}\n        target={isExternal ? \"_blank\" : undefined}\n        rel={isExternal ? \"noopener noreferrer\" : undefined}\n      >\n        {content}\n      </StyledCardLink>\n    );\n  }\n\n  return <StyledCard>{content}</StyledCard>;\n}\n\nexport { Card };\n";