import type { ComponentProps } from "react";
import { ArrowUpRight } from "@untitledui/icons";
import { Avatar, BadgeGroup, Button, PhotoWithFallback } from '../elements';
import { cx } from '../../utils/cx';
import { getAvatarUrl } from '../../utils/photo-helpers';
import type { BlogPost } from '../../types/api/blog-post';

// Helper to get first author from blog post
const getFirstAuthor = (post: BlogPost) => {
    return Array.isArray(post.blog_post_authors) && post.blog_post_authors.length > 0 
        ? post.blog_post_authors[0] 
        : null;
};

// Helper to format published date
const formatPublishedDate = (publishedAt?: string) => {
    return publishedAt 
        ? new Date(publishedAt).toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: 'numeric' })
        : 'Recent';
};

// Helper to clean excerpt markdown
const cleanExcerpt = (excerpt?: string) => {
    return excerpt?.replace(/[#*\[\]()]/g, '').trim() || '';
};

// Helper to get first tag from blog post
const getFirstTag = (post: BlogPost) => {
    return Array.isArray(post.blog_post_tags) && post.blog_post_tags.length > 0 
        ? post.blog_post_tags[0] 
        : null;
};

// Helper to extract all blog post data for rendering
const getBlogPostData = (article: BlogPost) => {
    const author = getFirstAuthor(article);
    const authorName = author?.name || 'Author';
    const authorHref = author?.slug ? `/blog/author/${author.slug}` : '/blog';
    const authorAvatarUrl = getAvatarUrl(author?.photo_attachments, author?.id, authorName);
    const tag = getFirstTag(article);
    const tagName = tag?.name || 'Blog';
    const tagHref = tag?.slug ? `/blog/tag/${tag.slug}` : '/blog';
    const href = `/blog/${article.slug}`;
    const title = article.title || 'Untitled Post';
    const publishedAt = formatPublishedDate(article.published_at);
    const summary = cleanExcerpt(article.excerpt_markdown);
    
    return {
        author,
        authorName,
        authorHref,
        authorAvatarUrl,
        tag,
        tagName,
        tagHref,
        href,
        title,
        publishedAt,
        summary,
    };
};

export const BlogCardVertical = ({ article, imageClassName }: { article: BlogPost; imageClassName?: string }) => {
    const { authorName, authorHref, authorAvatarUrl, href, title, summary, publishedAt } = getBlogPostData(article);
    
    return (
        <article className="flex flex-col gap-4">
            <a href={href} className="overflow-hidden rounded-2xl" tabIndex={-1}>
                <PhotoWithFallback
                    item={article}
                    fallbackId={article.id}
                    alt={title}
                    className={cx("aspect-[1.5] w-full object-cover transition duration-100 ease-linear hover:scale-105", imageClassName)}
                />
            </a>

            <div className="flex flex-col gap-5">
                <div className="flex flex-col gap-2">
                    <span className="text-sm font-semibold text-brand-secondary">Blog</span>
                    <div className="flex flex-col gap-1">
                        <a
                            href={href}
                            className="group/title flex justify-between gap-x-4 rounded-md text-lg font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
                        >
                            {title}
                            <ArrowUpRight
                                className="mt-0.5 size-6 shrink-0 text-fg-quaternary transition duration-100 ease-linear group-hover/title:text-fg-quaternary_hover"
                                aria-hidden="true"
                            />
                        </a>

                        <p className="line-clamp-2 text-md text-tertiary">{summary}</p>
                    </div>
                </div>

                <div className="flex gap-2">
                    <a href={authorHref} tabIndex={-1} className="flex">
                        <Avatar focusable alt={authorName} src={authorAvatarUrl} size="md" />
                    </a>

                    <div>
                        <a
                            href={authorHref}
                            className="block rounded-xs text-sm font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
                        >
                            {authorName}
                        </a>
                        <time className="block text-sm text-tertiary">{publishedAt}</time>
                    </div>
                </div>
            </div>
        </article>
    );
};

export const BlogCardVerticalBadge = ({
    article,
    badgeTheme = "light",
    imageClassName,
}: {
    article: BlogPost;
    badgeTheme?: ComponentProps<typeof BadgeGroup>["theme"];
    imageClassName?: string;
}) => {
    const { authorName, authorHref, authorAvatarUrl, href, title, summary, publishedAt } = getBlogPostData(article);
    
    return (
    <article className="flex flex-col gap-4">
        <a href={href} className="overflow-hidden rounded-xl" tabIndex={-1}>
            <PhotoWithFallback
                item={article}
                fallbackId={article.id}
                alt={title}
                className={cx("aspect-[1.5] w-full object-cover", imageClassName)}
            />
        </a>

        <div className="flex flex-col gap-5">
            <div className="flex flex-col items-start gap-3">
                <BadgeGroup addonText="Blog" size="md" theme={badgeTheme} color="brand" className="pr-3" iconTrailing={null}>
                    5 min read
                </BadgeGroup>
                <div className="flex flex-col gap-1">
                    <a
                        href={href}
                        className="flex justify-between gap-x-4 rounded-md text-lg font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
                    >
                        {title}
                        <ArrowUpRight className="mt-0.5 size-6 shrink-0 text-fg-quaternary" aria-hidden="true" />
                    </a>
                    <p className="line-clamp-2 text-md text-tertiary md:line-clamp-none">{summary}</p>
                </div>
            </div>

            <div className="flex gap-2">
                <a href={authorHref} tabIndex={-1} className="flex">
                    <Avatar focusable alt={authorName} src={authorAvatarUrl} size="md" />
                </a>

                <div>
                    <a
                        href={authorHref}
                        className="block rounded-xs text-sm font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
                    >
                        {authorName}
                    </a>
                    <time className="block text-sm text-tertiary">{publishedAt}</time>
                </div>
            </div>
        </div>
    </article>
    );
};

export const BlogCardVerticalCompact = ({
    article,
    imageClassName,
    titleClassName,
    className,
}: {
    article: BlogPost;
    imageClassName?: string;
    titleClassName?: string;
    className?: string;
}) => {
    const { authorName, href, title, summary, publishedAt } = getBlogPostData(article);
    
    return (
    <article className={cx("flex flex-col gap-4", className)}>
        <a href={href} className="overflow-hidden rounded-2xl" tabIndex={-1}>
            <PhotoWithFallback
                item={article}
                fallbackId={article.id}
                alt={title}
                className={cx("aspect-[1.5] w-full object-cover", imageClassName)}
            />
        </a>

        <div className="flex flex-col gap-6">
            <div className="flex flex-col items-start gap-2">
                <p className="text-sm font-semibold text-brand-secondary">
                    {authorName} • <time>{publishedAt}</time>
                </p>
                <div className="flex w-full flex-col gap-1">
                    <a
                        href={href}
                        className={cx(
                            "flex justify-between gap-x-4 rounded-md text-lg font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2",
                            titleClassName,
                        )}
                    >
                        {title}
                        <ArrowUpRight className="mt-0.5 size-6 shrink-0 text-fg-quaternary" aria-hidden="true" />
                    </a>
                    <p className="line-clamp-2 text-md text-tertiary">{summary}</p>
                </div>
            </div>
        </div>
    </article>
    );
};

export const BlogCardVerticalMinimal = ({ article, imageClassName, className }: { article: BlogPost; imageClassName?: string; className?: string }) => {
    const { authorName, authorHref, href, title, summary, publishedAt } = getBlogPostData(article);
    
    return (
    <article className={cx("flex flex-col gap-4", className)}>
        <div className="relative">
            <a href={href} className="w-full" tabIndex={-1}>
                <PhotoWithFallback
                    item={article}
                    fallbackId={article.id}
                    alt={title}
                    className={cx("aspect-[1.5] w-full object-cover", imageClassName)}
                />
            </a>
            <div className="absolute inset-x-0 bottom-0 overflow-hidden bg-linear-to-b from-transparent to-black/40">
                <div className="relative flex items-start justify-between bg-alpha-white/30 p-4 backdrop-blur-md before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-alpha-white/30 md:p-5">
                    <div>
                        <a
                            href={authorHref}
                            className="block rounded-xs text-sm font-semibold text-white outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
                        >
                            {authorName}
                        </a>
                        <time className="block text-sm text-white">{publishedAt}</time>
                    </div>
                    <a
                        href={href}
                        className="rounded-xs text-sm font-semibold text-white outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
                    >
                        Blog
                    </a>
                </div>
            </div>
        </div>

        <div className="flex flex-col items-start gap-5">
            <div className="flex flex-col gap-1">
                <a
                    href={href}
                    className="flex justify-between gap-x-4 rounded-md text-lg font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
                >
                    {title}
                </a>
                <p className="line-clamp-2 text-md text-tertiary">{summary}</p>
            </div>

            <Button href={href} color="link-color" size="lg" iconTrailing={ArrowUpRight}>
                Read post
            </Button>
        </div>
    </article>
    );
};

export const BlogCardHorizontal = ({ article, imageClassName }: { article: BlogPost; imageClassName?: string }) => {
    const { authorName, authorHref, authorAvatarUrl, tagName, href, title, publishedAt, summary } = getBlogPostData(article);
    
    return (
        <article className="flex flex-col gap-4 xl:flex-row xl:items-start">
            <a href={href} className="shrink-0 overflow-hidden rounded-2xl" tabIndex={-1}>
                <PhotoWithFallback
                    item={article}
                    fallbackId={article.id}
                    alt={title}
                    className={cx("aspect-[1.5] w-full object-cover xl:w-80", imageClassName)}
                />
            </a>

            <div className="flex flex-col gap-5">
                <div className="flex flex-col gap-2">
                    <span className="text-sm font-semibold text-brand-secondary">{tagName}</span>

                    <div className="flex flex-col gap-1">
                        <a
                            href={href}
                            className="flex justify-between gap-x-4 rounded-md text-lg font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
                        >
                            {title}
                        </a>

                        <p className="line-clamp-2 text-md text-tertiary">{summary}</p>
                    </div>
                </div>

                <div className="flex gap-2">
                    <a href={authorHref} tabIndex={-1} className="flex">
                        <Avatar focusable alt={authorName} src={authorAvatarUrl} size="md" />
                    </a>

                    <div>
                        <a
                            href={authorHref}
                            className="block rounded-xs text-sm font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
                        >
                            {authorName}
                        </a>
                        <time className="block text-sm text-tertiary">{publishedAt}</time>
                    </div>
                </div>
            </div>
        </article>
    );
};

export const BlogCardHorizontalBadge = ({ article }: { article: BlogPost }) => {
    const { authorName, authorHref, authorAvatarUrl, tagName, href, title, publishedAt, summary } = getBlogPostData(article);
    
    return (
        <article className="flex flex-col gap-5 lg:flex-row lg:items-start">
            <a href={href} className="shrink-0 overflow-hidden" tabIndex={-1}>
                <PhotoWithFallback
                    item={article}
                    fallbackId={article.id}
                    alt={title}
                    className="h-60 w-full object-cover lg:h-50 lg:w-91.5"
                />
            </a>

            <div className="flex flex-col gap-6">
                <div className="flex flex-col gap-2">
                    <BadgeGroup addonText={tagName} size="md" theme="light" color="brand" className="pr-3" iconTrailing={null}>
                        Blog
                    </BadgeGroup>
                    <div className="flex flex-col gap-2">
                        <a
                            href={href}
                            className="rounded-xs text-lg font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
                        >
                            {title}
                        </a>

                        <p className="line-clamp-2 text-md text-tertiary">{summary}</p>
                    </div>
                </div>

                <div className="flex gap-2">
                    <a href={authorHref} tabIndex={-1} className="flex">
                        <Avatar focusable alt={authorName} src={authorAvatarUrl} size="md" />
                    </a>

                    <div>
                        <a
                            href={authorHref}
                            className="block rounded-xs text-sm font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
                        >
                            {authorName}
                        </a>
                        <time className="block text-sm text-tertiary">{publishedAt}</time>
                    </div>
                </div>
            </div>
        </article>
    );
};

export const BlogCardHorizontalCompact = ({ article, imageClassName }: { article: BlogPost; imageClassName?: string }) => {
    const { authorName, authorHref, href, title, publishedAt, summary } = getBlogPostData(article);
    
    return (
        <article className="flex flex-col gap-4 xl:flex-row xl:items-start">
            <a href={href} className="shrink-0 overflow-hidden rounded-2xl" tabIndex={-1}>
                <PhotoWithFallback
                    item={article}
                    fallbackId={article.id}
                    alt={title}
                    className={cx("aspect-[1.5] w-full object-cover xl:w-91.5", imageClassName)}
                />
            </a>

            <div className="flex flex-col gap-6">
                <div className="flex flex-col gap-2">
                    <p className="text-sm font-semibold text-brand-secondary">
                        <a href={authorHref} className="rounded-xs outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2">
                            {authorName}
                        </a>{" "}
                        • <time>{publishedAt}</time>
                    </p>
                    <div className="flex flex-col gap-1">
                        <a
                            href={href}
                            className="rounded-xs text-lg font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
                        >
                            {title}
                        </a>

                        <p className="line-clamp-2 text-md text-tertiary">{summary}</p>
                    </div>
                </div>
            </div>
        </article>
    );
};

export const BlogCardHorizontalMinimal = ({ article }: { article: BlogPost }) => {
    const { authorName, authorHref, tagName, tagHref, href, title, publishedAt, summary } = getBlogPostData(article);
    
    return (
        <article className="flex flex-col gap-5 lg:flex-row lg:items-start">
            <div className="relative shrink-0">
                <a href={href} className="w-full" tabIndex={-1}>
                    <PhotoWithFallback
                        item={article}
                        fallbackId={article.id}
                        alt={title}
                        className="h-60 w-full object-cover lg:h-50 lg:w-80"
                    />
                </a>
                <div className="absolute inset-x-0 bottom-0 overflow-hidden bg-linear-to-b from-transparent to-black/40">
                    <div className="relative flex items-start justify-between bg-alpha-white/30 p-4 backdrop-blur-md before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-alpha-white/30">
                        <div>
                            <a
                                href={authorHref}
                                className="block rounded-xs text-sm font-semibold text-white outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
                            >
                                {authorName}
                            </a>
                            <time className="block text-sm text-white">{publishedAt}</time>
                        </div>
                        <a
                            href={tagHref}
                            className="rounded-xs text-sm font-semibold text-white outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
                        >
                            {tagName}
                        </a>
                    </div>
                </div>
            </div>

            <div className="flex flex-col items-start gap-6">
                <div className="flex flex-col gap-2">
                    <a
                        href={href}
                        className="block rounded-xs text-xl font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2 md:text-lg"
                    >
                        {title}
                    </a>
                    <p className="line-clamp-2 text-md text-tertiary lg:line-clamp-3">{summary}</p>
                </div>

                <Button href={href} color="link-color" size="lg" iconTrailing={ArrowUpRight}>
                    Read post
                </Button>
            </div>
        </article>
    );
};

export const BlogCardFullWidthVertical = ({ article }: { article: BlogPost }) => {
    const { authorName, authorHref, authorAvatarUrl, tagName, tagHref, href, title, publishedAt, summary } = getBlogPostData(article);
    
    return (
        <article className="flex flex-col overflow-hidden rounded-2xl ring-1 ring-secondary ring-inset">
            <a href={href} tabIndex={-1}>
                <PhotoWithFallback
                    item={article}
                    fallbackId={article.id}
                    alt={title}
                    className="h-50 w-full object-cover md:h-60"
                />
            </a>

            <div className="flex flex-col gap-6 p-5 pb-6 md:p-6">
                <div className="flex flex-col gap-2">
                    <Button color="link-color" href={tagHref}>
                        {tagName}
                    </Button>
                    <div className="flex flex-col gap-2">
                        <Button
                            color="link-gray"
                            href={href}
                            className="flex justify-between gap-4 text-xl font-semibold text-primary hover:text-brand-secondary md:text-display-xs"
                            iconTrailing={<ArrowUpRight className="size-6 shrink-0" aria-hidden="true" />}
                        >
                            {title}
                        </Button>
                        <p className="line-clamp-2 text-md text-tertiary md:line-clamp-3">{summary}</p>
                    </div>
                </div>

                <div className="flex gap-2">
                    <a href={authorHref} tabIndex={-1} className="flex">
                        <Avatar focusable alt={authorName} src={authorAvatarUrl} size="md" />
                    </a>

                    <div>
                        <p className="text-sm font-semibold">
                            <Button color="link-color" href={authorHref} className="text-primary">
                                {authorName}
                            </Button>
                        </p>
                        <time className="block text-sm text-tertiary">{publishedAt}</time>
                    </div>
                </div>
            </div>
        </article>
    );
};

export const BlogCardFullWidthVerticalAlt = ({ article }: { article: BlogPost }) => {
    const { authorName, authorHref, authorAvatarUrl, tagName, href, title, publishedAt, summary } = getBlogPostData(article);
    
    return (
        <article className="flex flex-col overflow-hidden rounded-2xl ring-1 ring-secondary ring-inset">
            <a href={href} tabIndex={-1}>
                <PhotoWithFallback
                    item={article}
                    fallbackId={article.id}
                    alt={title}
                    className="h-60 w-full object-cover"
                />
            </a>

            <div className="flex flex-col gap-6 p-5 pb-6 md:p-6">
                <div className="flex flex-col gap-4">
                    <BadgeGroup addonText={tagName} size="md" theme="light" color="brand" className="pr-3" iconTrailing={null}>
                        Blog
                    </BadgeGroup>
                    <div className="flex flex-col gap-2">
                        <Button
                            color="link-gray"
                            href={href}
                            className="flex justify-between gap-4 text-xl font-semibold text-primary hover:text-brand-secondary md:text-display-xs"
                            iconTrailing={<ArrowUpRight className="size-6 shrink-0" aria-hidden="true" />}
                        >
                            {title}
                        </Button>
                        <p className="line-clamp-2 text-md text-tertiary md:line-clamp-3">{summary}</p>
                    </div>
                </div>

                <div className="flex gap-2">
                    <a href={authorHref} tabIndex={-1} className="flex">
                        <Avatar focusable alt={authorName} src={authorAvatarUrl} size="md" />
                    </a>

                    <div>
                        <p className="text-sm font-semibold">
                            <Button color="link-color" href={authorHref} className="text-primary">
                                {authorName}
                            </Button>
                        </p>
                        <time className="block text-sm text-tertiary">{publishedAt}</time>
                    </div>
                </div>
            </div>
        </article>
    );
};

export const BlogCardFullWidthVerticalCompact = ({ article }: { article: BlogPost }) => {
    const { authorName, authorHref, href, title, publishedAt, summary } = getBlogPostData(article);
    
    return (
        <article className="flex flex-col overflow-hidden rounded-2xl ring-1 ring-secondary ring-inset">
            <a href={href} tabIndex={-1}>
                <PhotoWithFallback
                    item={article}
                    fallbackId={article.id}
                    alt={title}
                    className="h-60 w-full object-cover"
                />
            </a>

            <div className="flex flex-col gap-6 p-5 pb-6 md:p-6">
                <div className="flex flex-col gap-2">
                    <p className="text-sm font-semibold text-brand-secondary">
                        <Button href={authorHref} color="link-color">
                            {authorName}
                        </Button>{" "}
                        • <time>{publishedAt}</time>
                    </p>
                    <div className="flex flex-col gap-2">
                        <Button
                            color="link-gray"
                            href={href}
                            className="flex justify-between gap-4 text-xl font-semibold text-primary hover:text-brand-secondary md:text-display-xs"
                            iconTrailing={<ArrowUpRight className="size-6 shrink-0" aria-hidden="true" />}
                        >
                            {title}
                        </Button>
                        <p className="line-clamp-2 text-md text-tertiary md:line-clamp-3">{summary}</p>
                    </div>
                </div>
            </div>
        </article>
    );
};

export const BlogCardFullWidthVerticalMinimal = ({ article }: { article: BlogPost }) => {
    const { authorName, authorHref, tagName, tagHref, href, title, publishedAt, summary } = getBlogPostData(article);
    
    return (
        <article className="flex flex-col overflow-hidden rounded-2xl ring-1 ring-secondary ring-inset">
            <div className="relative shrink-0">
                <a href={href} className="w-full" tabIndex={-1}>
                    <PhotoWithFallback
                        item={article}
                        fallbackId={article.id}
                        alt={title}
                        className="h-60 w-full object-cover md:h-70"
                    />
                </a>
                <div className="absolute inset-x-0 bottom-0 overflow-hidden bg-linear-to-b from-transparent to-black/40">
                    <div className="relative flex items-start justify-between bg-alpha-white/30 p-4 backdrop-blur-md before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-alpha-white/30 md:p-6">
                        <div>
                            <p className="text-sm font-semibold">
                                <Button href={authorHref} color="link-gray" className="text-white">
                                    {authorName}
                                </Button>
                            </p>
                            <time className="block text-sm text-white">{publishedAt}</time>
                        </div>
                        <p className="text-sm font-semibold">
                            <Button href={tagHref} color="link-gray" className="text-white">
                                {tagName}
                            </Button>
                        </p>
                    </div>
                </div>
            </div>

        <div className="flex flex-col gap-6 p-5 pb-6 md:p-6">
            <div className="flex flex-col gap-2">
                <div className="flex flex-col gap-2">
                    <Button
                        color="link-gray"
                        href={href}
                        className="flex justify-between gap-4 text-xl font-semibold text-primary hover:text-brand-secondary md:text-display-xs"
                        iconTrailing={<ArrowUpRight className="size-6 shrink-0" aria-hidden="true" />}
                    >
                        {title}
                    </Button>
                    <p className="line-clamp-2 text-md text-tertiary md:line-clamp-3">{summary}</p>
                </div>
            </div>

            <Button href={href} color="link-color" size="lg" iconTrailing={ArrowUpRight}>
                Read post
            </Button>
        </div>
    </article>
    );
};

export const BlogCardFullWidthHorizontal = ({ article }: { article: BlogPost }) => {
    const { authorName, authorHref, authorAvatarUrl, tagName, tagHref, href, title, publishedAt, summary } = getBlogPostData(article);
    
    return (
        <article className="flex flex-col overflow-hidden rounded-2xl ring-1 ring-secondary ring-inset md:flex-row md:items-start">
            <a href={href} className="shrink-0" tabIndex={-1}>
                <PhotoWithFallback
                    item={article}
                    fallbackId={article.id}
                    alt={title}
                    className="h-60 w-full object-cover md:h-60 md:w-80"
                />
            </a>

            <div className="flex flex-col gap-6 p-5 pb-6 md:p-6">
                <div className="flex flex-col gap-2">
                    <Button href={tagHref} color="link-color">
                        {tagName}
                    </Button>
                    <div className="flex flex-col gap-2">
                        <Button href={href} color="link-gray" size="xl" className="text-xl font-semibold text-primary md:text-lg">
                            {title}
                        </Button>

                        <p className="line-clamp-2 text-md text-tertiary">{summary}</p>
                    </div>
                </div>

                <div className="flex gap-2">
                    <a href={authorHref} tabIndex={-1} className="flex">
                        <Avatar focusable alt={authorName} src={authorAvatarUrl} size="md" />
                    </a>

                    <div>
                        <p className="text-sm font-semibold">
                            <Button href={authorHref} color="link-gray" className="text-primary">
                                {authorName}
                            </Button>
                        </p>
                        <time className="block text-sm text-tertiary">{publishedAt}</time>
                    </div>
                </div>
            </div>
        </article>
    );
};

export const BlogCardFullWidthHorizontalAlt = ({ article }: { article: BlogPost }) => {
    const { authorName, authorHref, authorAvatarUrl, tagName, href, title, publishedAt, summary } = getBlogPostData(article);
    
    return (
        <article className="flex flex-col overflow-hidden rounded-2xl ring-1 ring-secondary ring-inset md:flex-row md:items-start">
            <a href={href} className="shrink-0" tabIndex={-1}>
                <PhotoWithFallback
                    item={article}
                    fallbackId={article.id}
                    alt={title}
                    className="h-60 w-full object-cover md:h-60.5 md:w-80"
                />
            </a>

            <div className="flex flex-col gap-6 p-5 pb-6 md:p-6">
                <div className="flex flex-col gap-4">
                    <BadgeGroup addonText={tagName} size="md" theme="light" color="brand" className="pr-3" iconTrailing={null}>
                        Blog
                    </BadgeGroup>
                    <div className="flex flex-col gap-2">
                        <Button href={href} color="link-gray" size="xl" className="text-xl font-semibold text-primary md:text-lg">
                            {title}
                        </Button>

                        <p className="line-clamp-2 text-md text-tertiary">{summary}</p>
                    </div>
                </div>

                <div className="flex gap-2">
                    <a href={authorHref} tabIndex={-1} className="flex">
                        <Avatar focusable alt={authorName} src={authorAvatarUrl} size="md" />
                    </a>

                    <div>
                        <p className="text-sm font-semibold">
                            <Button href={authorHref} color="link-gray" className="text-primary">
                                {authorName}
                            </Button>
                        </p>
                        <time className="block text-sm text-tertiary">{publishedAt}</time>
                    </div>
                </div>
            </div>
        </article>
    );
};

export const BlogCardFullWidthHorizontalCompact = ({ article }: { article: BlogPost }) => {
    const { authorName, authorHref, href, title, publishedAt, summary } = getBlogPostData(article);
    
    return (
        <article className="flex flex-col overflow-hidden rounded-2xl ring-1 ring-secondary ring-inset md:flex-row md:items-start">
            <a href={href} className="shrink-0" tabIndex={-1}>
                <PhotoWithFallback
                    item={article}
                    fallbackId={article.id}
                    alt={title}
                    className="h-60 w-full object-cover md:h-60 md:w-80"
                />
            </a>

            <div className="flex flex-col gap-6 p-5 pb-6 md:p-6">
                <div className="flex flex-col gap-2">
                    <p className="text-sm font-semibold text-brand-secondary">
                        <Button href={authorHref} color="link-color">
                            {authorName}
                        </Button>{" "}
                        • <time>{publishedAt}</time>
                    </p>
                    <div className="flex flex-col gap-2">
                        <Button href={href} color="link-gray" size="xl" className="text-xl font-semibold text-primary md:text-lg">
                            {title}
                        </Button>

                        <p className="line-clamp-2 text-md text-tertiary">{summary}</p>
                    </div>
                </div>
            </div>
        </article>
    );
};

export const BlogCardFullWidthHorizontalMinimal = ({ article }: { article: BlogPost }) => {
    const { authorName, authorHref, tagName, tagHref, href, title, publishedAt, summary } = getBlogPostData(article);
    
    return (
        <article className="flex flex-col overflow-hidden rounded-2xl ring-1 ring-secondary ring-inset md:flex-row md:items-start">
            <div className="relative shrink-0">
                <a href={href} className="w-full" tabIndex={-1}>
                    <PhotoWithFallback
                        item={article}
                        fallbackId={article.id}
                        alt={title}
                        className="h-60 w-full object-cover md:h-60 md:w-80"
                    />
                </a>
                <div className="absolute inset-x-0 bottom-0 overflow-hidden bg-linear-to-b from-transparent to-black/40">
                    <div className="relative flex items-start justify-between bg-alpha-white/30 p-4 backdrop-blur-md before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-alpha-white/30 md:p-6">
                        <div>
                            <p className="text-sm font-semibold">
                                <Button href={authorHref} color="link-gray" className="text-white">
                                    {authorName}
                                </Button>
                            </p>
                            <time className="block text-sm text-white">{publishedAt}</time>
                        </div>
                        <p className="text-sm font-semibold">
                            <Button href={tagHref} color="link-gray" className="text-white">
                                {tagName}
                            </Button>
                        </p>
                    </div>
                </div>
            </div>

            <div className="flex flex-col gap-6 p-5 pb-6 md:p-6">
                <div className="flex flex-col gap-2">
                    <div className="flex flex-col gap-2">
                        <Button href={href} color="link-gray" size="xl" className="text-xl font-semibold text-primary md:text-lg">
                            {title}
                        </Button>

                        <p className="line-clamp-2 text-md text-tertiary md:line-clamp-3">{summary}</p>
                    </div>
                </div>

                <Button href={href} color="link-color" size="lg" iconTrailing={ArrowUpRight}>
                    Read post
                </Button>
            </div>
        </article>
    );
};
