sgw-owner-app/components/diary/TripCard.tsx

import React from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Platform,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { Trip, TRIP_STATUS_CONFIG } from "./types";

interface TripCardProps {
  trip: Trip;
  onPress?: () => void;
  onView?: () => void;
  onEdit?: () => void;
  onTeam?: () => void;
  onSend?: () => void;
  onDelete?: () => void;
}

export default function TripCard({ trip, onPress, onView, onEdit, onTeam, onSend, onDelete }: TripCardProps) {
  const statusConfig = TRIP_STATUS_CONFIG[trip.status];

  // Determine which actions to show based on status
  const showEdit = trip.status === 'created' || trip.status === 'pending';
  const showSend = trip.status === 'created';
  const showDelete = trip.status === 'pending';

  return (
    <View style={styles.card}>
      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
        {/* Header */}
        <View style={styles.header}>
          <View style={styles.headerLeft}>
            <Ionicons
              name={statusConfig.icon as any}
              size={24}
              color={statusConfig.textColor}
            />
            <View style={styles.titleContainer}>
              <Text style={styles.title}>{trip.title}</Text>
              <Text style={styles.code}>{trip.code}</Text>
            </View>
          </View>
          <View
            style={[
              styles.badge,
              {
                backgroundColor: statusConfig.bgColor,
              },
            ]}
          >
            <Text
              style={[
                styles.badgeText,
                {
                  color: statusConfig.textColor,
                },
              ]}
            >
              {statusConfig.label}
            </Text>
          </View>
        </View>

        {/* Info Grid */}
        <View style={styles.infoGrid}>
          <View style={styles.infoRow}>
            <Text style={styles.label}>Tàu</Text>
            <Text style={styles.value}>
              {trip.vessel} ({trip.vesselCode})
            </Text>
          </View>

          <View style={styles.infoRow}>
            <Text style={styles.label}>Khởi hành</Text>
            <Text style={styles.value}>{trip.departureDate}</Text>
          </View>

          <View style={styles.infoRow}>
            <Text style={styles.label}>Trở về</Text>
            <Text style={styles.value}>{trip.returnDate || "-"}</Text>
          </View>

          <View style={styles.infoRow}>
            <Text style={styles.label}>Thời gian</Text>
            <Text style={[styles.value, styles.duration]}>{trip.duration}</Text>
          </View>
        </View>
      </TouchableOpacity>

      {/* Action Buttons */}
      <View style={styles.divider} />
      <View style={styles.actionsContainer}>
        <TouchableOpacity style={styles.actionButton} onPress={onView} activeOpacity={0.7}>
          <Ionicons name="eye-outline" size={20} color="#6B7280" />
          <Text style={styles.actionText}>View</Text>
        </TouchableOpacity>

        {showEdit && (
          <TouchableOpacity style={styles.actionButton} onPress={onEdit} activeOpacity={0.7}>
            <Ionicons name="create-outline" size={20} color="#6B7280" />
            <Text style={styles.actionText}>Edit</Text>
          </TouchableOpacity>
        )}

        <TouchableOpacity style={styles.actionButton} onPress={onTeam} activeOpacity={0.7}>
          <Ionicons name="people-outline" size={20} color="#6B7280" />
          <Text style={styles.actionText}>Team</Text>
        </TouchableOpacity>

        {showSend && (
          <TouchableOpacity style={styles.actionButton} onPress={onSend} activeOpacity={0.7}>
            <Ionicons name="send-outline" size={20} color="#6B7280" />
            <Text style={styles.actionText}>Send</Text>
          </TouchableOpacity>
        )}

        {showDelete && (
          <TouchableOpacity style={styles.actionButton} onPress={onDelete} activeOpacity={0.7}>
            <Ionicons name="trash-outline" size={20} color="#EF4444" />
            <Text style={[styles.actionText, styles.deleteText]}>Delete</Text>
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: "#FFFFFF",
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.05,
    shadowRadius: 8,
    elevation: 2,
    borderWidth: 1,
    borderColor: "#F3F4F6",
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-start",
    marginBottom: 16,
  },
  headerLeft: {
    flexDirection: "row",
    alignItems: "center",
    flex: 1,
  },
  titleContainer: {
    marginLeft: 12,
    flex: 1,
  },
  title: {
    fontSize: 16,
    fontWeight: "600",
    color: "#111827",
    marginBottom: 2,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  code: {
    fontSize: 14,
    color: "#6B7280",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  badge: {
    paddingHorizontal: 12,
    paddingVertical: 4,
    borderRadius: 12,
  },
  badgeText: {
    fontSize: 12,
    fontWeight: "500",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  infoGrid: {
    gap: 12,
  },
  infoRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  label: {
    fontSize: 14,
    color: "#6B7280",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  value: {
    fontSize: 14,
    color: "#111827",
    fontWeight: "500",
    textAlign: "right",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  duration: {
    color: "#3B82F6",
  },
  divider: {
    height: 1,
    backgroundColor: "#F3F4F6",
    marginTop: 16,
  },
  actionsContainer: {
    flexDirection: "row",
    justifyContent: "space-around",
    paddingTop: 12,
  },
  actionButton: {
    flexDirection: "row",
    alignItems: "center",
    gap: 6,
    paddingVertical: 8,
    paddingHorizontal: 12,
  },
  actionText: {
    fontSize: 14,
    color: "#6B7280",
    fontWeight: "500",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  deleteText: {
    color: "#EF4444",
  },
});