Minimal Blog

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Clock3Icon, ArrowRightIcon, FilterIcon } from 'lucide-react';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Separator } from '@/components/ui/separator';

// Define post type
interface BlogPost {
  id: number;
  title: string;
  excerpt: string;
  category: string;
  date: string;
  readTime: string;
  author: {
    name: string;
    avatar: string;
  };
}

const blogPosts: BlogPost[] = [
  {
    id: 1,
    title: 'Defining Your Brand Voice: A Step-by-Step Guide',
    excerpt:
      'Learn how to develop a consistent and authentic brand voice that resonates with your target audience and strengthens your market position.',
    category: 'Branding',
    date: 'April 15, 2023',
    readTime: '8 min read',
    author: {
      name: 'Emma Parker',
      avatar:
        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=256&q=80',
    },
  },
  {
    id: 2,
    title: 'The Psychology of Color in Marketing: Choosing the Right Palette',
    excerpt:
      'Explore how color choices influence consumer perception and how to select the optimal color scheme for your marketing materials.',
    category: 'Design',
    date: 'April 10, 2023',
    readTime: '6 min read',
    author: {
      name: 'Michael Chen',
      avatar:
        'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=256&q=80',
    },
  },
  {
    id: 3,
    title: 'Building an Effective Content Distribution Strategy',
    excerpt:
      'Discover how to get your content in front of the right audience at the right time through strategic distribution channels.',
    category: 'Content',
    date: 'April 7, 2023',
    readTime: '10 min read',
    author: {
      name: 'Sarah Johnson',
      avatar:
        'https://images.unsplash.com/photo-1534751516642-a1af1ef26a56?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=256&q=80',
    },
  },
  {
    id: 4,
    title: 'Data Privacy Regulations: What Marketers Need to Know',
    excerpt:
      'Navigate the complex landscape of data privacy laws and learn how to maintain compliance while effectively reaching your audience.',
    category: 'Legal',
    date: 'April 3, 2023',
    readTime: '9 min read',
    author: {
      name: 'David Wilson',
      avatar:
        'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=256&q=80',
    },
  },
  {
    id: 5,
    title: 'Creating Effective Landing Pages That Convert',
    excerpt:
      'Master the art of designing landing pages that drive conversions through strategic layout, messaging, and call-to-actions.',
    category: 'Conversion',
    date: 'March 28, 2023',
    readTime: '7 min read',
    author: {
      name: 'Jessica Lee',
      avatar:
        'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=256&q=80',
    },
  },
  {
    id: 6,
    title: 'Omnichannel Marketing: Crafting Seamless Customer Experiences',
    excerpt:
      "Learn how to create consistent, integrated customer experiences across all touchpoints in the buyer's journey.",
    category: 'Strategy',
    date: 'March 22, 2023',
    readTime: '11 min read',
    author: {
      name: 'Robert Zhang',
      avatar:
        'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=256&q=80',
    },
  },
];

export default function BlogSectionMinimal() {
  const categories = [
    'All Categories',
    ...Array.from(new Set(blogPosts.map((post) => post.category))),
  ];
  const [selectedCategory, setSelectedCategory] = useState('All Categories');

  // Filter posts based on selected category
  const filteredPosts =
    selectedCategory === 'All Categories'
      ? blogPosts
      : blogPosts.filter((post) => post.category === selectedCategory);

  return (
    <section className="container mx-auto px-4 py-24 md:px-6 2xl:max-w-[1400px]">
      <div className="mx-auto max-w-3xl space-y-16">
        <div className="space-y-4">
          <h2 className="text-center text-3xl font-bold tracking-tight">
            Journal
          </h2>
          <p className="text-muted-foreground text-center">
            Thoughts, ideas, and insights on marketing and business strategy.
          </p>
        </div>

        <div className="flex justify-end">
          <div className="flex items-center gap-2">
            <FilterIcon className="text-muted-foreground h-4 w-4" />
            <Select
              value={selectedCategory}
              onValueChange={setSelectedCategory}
            >
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Category" />
              </SelectTrigger>
              <SelectContent>
                {categories.map((category) => (
                  <SelectItem key={category} value={category}>
                    {category}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>

        <div className="space-y-12">
          {filteredPosts.map((post) => (
            <article key={post.id} className="space-y-4">
              <div className="space-y-2">
                <div className="flex flex-wrap items-center gap-2">
                  <Badge variant="outline">{post.category}</Badge>
                  <span className="text-muted-foreground text-sm">
                    {post.date}
                  </span>
                </div>

                <h3 className="hover:text-primary text-xl font-semibold tracking-tight transition-colors sm:text-2xl">
                  <a href="#">{post.title}</a>
                </h3>
              </div>

              <p className="text-muted-foreground text-sm sm:text-base">
                {post.excerpt}
              </p>

              <div className="flex flex-col gap-4 pt-4 sm:flex-row sm:items-center sm:justify-between">
                <div className="flex flex-wrap items-center gap-3">
                  <div className="relative h-8 w-8 flex-shrink-0 overflow-hidden rounded-full">
                    <img
                      src={post.author.avatar}
                      alt={post.author.name}
                      className="object-cover"
                    />
                  </div>
                  <span className="text-sm font-medium">
                    {post.author.name}
                  </span>
                  <div className="text-muted-foreground flex items-center text-sm">
                    <Clock3Icon className="mr-1 h-3 w-3" />
                    <span>{post.readTime}</span>
                  </div>
                </div>

                <Button
                  variant="ghost"
                  size="sm"
                  className="hover:text-primary self-start hover:bg-transparent sm:self-center"
                  asChild
                >
                  <a href="#">
                    Continue Reading
                    <ArrowRightIcon className="ml-1 h-4 w-4" />
                  </a>
                </Button>
              </div>

              <Separator className="mt-8" />
            </article>
          ))}
        </div>

        {filteredPosts.length === 0 && (
          <div className="py-12 text-center">
            <p className="text-muted-foreground">
              No articles found in this category.
            </p>
          </div>
        )}

        <div className="flex justify-center">
          <Button asChild variant="outline" className="gap-2">
            <a href="#">
              Load More Articles
              <ArrowRightIcon className="ml-1 h-4 w-4" />
            </a>
          </Button>
        </div>
      </div>
    </section>
  );
}