interface SocialLinkProps {
  name: string
  handle: string
  url: string
}

export function SocialLink({ name, handle, url }: SocialLinkProps) {
  return (
    <a
      href={url}
      className="group p-4 border border-[oklch(0.48_0.015_255)] dark:border-border rounded-lg hover:border-[oklch(0.3_0.015_255)] dark:hover:border-muted-foreground/50 transition-all duration-300 hover:shadow-sm block"
      target="_blank"
      rel="noopener noreferrer"
    >
      <div className="space-y-2">
        <div className="text-[oklch(0.2_0.02_255)] dark:text-foreground dark:group-hover:text-muted-foreground transition-colors duration-300">
          {name}
        </div>
        <div className="text-sm text-[oklch(0.48_0.015_255)] dark:text-muted-foreground">
          {handle}
        </div>
      </div>
    </a>
  )
}
