import dayjs from 'dayjs';
import { useRouter } from 'expo-router';
import React from 'react';
import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
import { ROUTES } from '@/constants/Routes';

type Props = {
  id: string;
  title: string;
  coverImage: string;
  publishedAt: string; // ISO
  readCount: number;
};

export function ArticleCard({ id, title, coverImage, publishedAt, readCount }: Props) {
  const router = useRouter();
  return (
    <Pressable onPress={() => router.push(`${ROUTES.ARTICLE}/${id}`)} style={styles.card}>
      <Image source={{ uri: coverImage }} style={styles.cover} />
      <View style={styles.meta}>
        <Text style={styles.title} numberOfLines={2}>{title}</Text>
        <View style={styles.row}>
          <Text style={styles.metaText}>{dayjs(publishedAt).format('YYYY-MM-DD')}</Text>
          <Text style={[styles.metaText, styles.dot]}>·</Text>
          <Text style={styles.metaText}>{readCount} 阅读</Text>
        </View>
      </View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  card: {
    flexDirection: 'row',
    backgroundColor: '#FFFFFF',
    borderRadius: 20,
    padding: 14,
    marginBottom: 14,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.06,
    shadowRadius: 10,
    elevation: 2,
  },
  cover: {
    width: 92,
    height: 92,
    borderRadius: 16,
  },
  meta: {
    flex: 1,
    paddingLeft: 12,
    justifyContent: 'center',
  },
  title: {
    fontSize: 16,
    color: '#192126',
    fontWeight: '800',
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 8,
  },
  metaText: {
    fontSize: 12,
    color: '#8A8A8E',
  },
  dot: {
    paddingHorizontal: 6,
  },
});